vue 与 iframe 之间通信

1.iframe内参数返回处理；

2.页面往iframe传参--动态修改 iframe 内容

• 如果不想嵌套整个页面，而是只嵌套部分内容，可以通过 postMessage 实现父子页面通信，动态修改 iframe 内容。

父页面：

<template>
  <div>
    <h1>父页面</h1>
    <iframe ref="myIframe" :src="iframeUrl" width="100%" height="500px"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iframeUrl: window.location.origin + '/iframe-content', // 指向子页面
    };
  },
  mounted() {
    // 向 iframe 发送消息
    const iframe = this.$refs.myIframe;
    iframe.onload = () => {
      iframe.contentWindow.postMessage({ type: 'UPDATE_CONTENT', data: '动态内容' }, '*');
    };
  },
};
</script>

子页面（iframe-content）：

<template>
  <div>
    <h1>子页面</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '默认内容',
    };
  },
  created() {
    // 监听父页面消息
    window.addEventListener('message', (event) => {
      if (event.data.type === 'UPDATE_CONTENT') {
        this.message = event.data.data;
      }
    });
  },
};
</script>

• https://worktile.com/kb/p/3667994