vue 集成 iframe

IframeDemo.vue

<template>
  <iframe :src="the_url" @load="onIframeLoad" />
</template>

<script>
  export default {
    data () {
      return {
        the_url: "http://xxx.com/yyy",
        some_id: 42
      }
    }

    methods: {
      onIframeLoad (event) {
        const iframe = event.target
        window.addEventListener('message', this.handleMessage)
        iframe.contentWindow.eval(`
          $('.some-element').attr('id', ${this.some_id})
          $('.title').click(function () {
            window.parent.postMessage({
              cmd: 'xxx',
              params: {
                yyy: $('.title').attr('name')
              }
            })
          })
        `)
      }

      handleMessage (event) {
        const data = event.data
        switch (data.cmd) {
          case 'xxx':
            // do something
            break
        }
      }
    }
  }
</script>