iframe与vue组件的交互

https://www.npmjs.com/package/postmate

child iframe

<script>
import Postmate from 'postmate'
export default {
  mounted() {
    const handshake = new Postmate.Model({
      haha: '123',
      height: () => 500,
      abc(p) {
        console.log(p)
      },
    })
    // When parent <-> child handshake is complete, events may be emitted to the parent
    handshake.then((child) => {
      child.emit('some-event', 'Hello, World!')
      console.log(child)
    })
  },
}
</script>

parent

<script>
import Postmate from 'postmate'
export default {
  data() {
    return {
      $child: null,
      abc: 'haha',
    }
  },
  mounted() {
    const handshake = new Postmate({
      container: document.getElementById('some-div'),
      url: 'http://localhost:8081/#/g',
      name: 'my-iframe-name',
      model: {
        haha: '456',
      },
      classListArray: ['myClass', 'myClass1'],
    })

    handshake.then((child) => {
      this.$child = child
      child.get('height').then((height) => {
        child.frame.style.height = `${height}px`
      })
      child.on('some-event', (data) => console.log(data)) // Logs "Hello, World!"
    })
  },
  methods: {
    sendEvent() {
      this.$child.call('abc', 'haha')
    },
  },
}
</script>