Vue内嵌iframe， 使用postMessage 实现跨域通信

https://www.jianshu.com/p/bc397045937e

https://segmentfault.com/a/1190000016258735

https://blog.csdn.net/tang_yi_/article/details/79401280

window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机  (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

原理：

• 利用postMessage不能和服务端交换数据，只能在两个窗口（iframe）之间交换数据
• 两个窗口能通信的前提是，一个窗口以iframe的形式存在于另一个窗口，或者一个窗口是从另一个窗口通过window.open()或者超链接的形式打开的（同样可以用window.opener获取源窗口）

语法

otherWindow.postMessage(message, targetOrigin, [transfer]);

1.otherWindow

其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。

2.message

将要发送到其他 window的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。

3.targetOrigin

通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口；例如，当用postMessage传送密码时，这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的origin属性完全一致，来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的targetOrigin，而不是*。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。

4.transfer 可选

是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

使用

1.父页面向子页面传递数据并监听子页面发送过来的信息

<template>
  <div class="">
    <iframe
      id="test"
      ref="iframe"
      height="1000"
      width="100%"
      frameborder="no"
      scrolling="no"
      :src="src"
    />
    <div @click="sendMessage">向iframe发送信息</div>
  </div>
</template>

<script>
import { getToken, setToken } from '@/utils/auth'
export default {
  components: {},
  data() {
    return {
      src: 'https://ftctest.btonline365.com/html/Risk/model/model_list.html?token=' + getToken()
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.iframeInit()
    console.log(this.src)
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  methods: {
    iframeInit() {
      const iframe = this.$refs.iframe
      // 处理兼容问题
      if (iframe.attachEvent) {
        // 监听子级返回数据
        window.attachEvent(
          'onmessage',
          (e) => {
          // console.log("父级接收子级返回数据" + e.data);
              alert('iframe页面token失效了啊啊啊啊啊')
              // setToken(JSON.parse(e.data))
              // 外部vue向iframe内部传数据
              iframe.contentWindow.postMessage({
                token: getToken()
              }, 'https://ftctest.btonline365.com/html/Risk/model/model_list.html')
          },
          false
        )
      } else {
        // 接受子级返回数据
        window.addEventListener(
          'message',
          (e) => {
            console.log(e.data)
            // alert('iframe页面token失效了')
            // 外部vue向iframe内部传数据
            iframe.contentWindow.postMessage(JSON.stringify({
              token: getToken()
            }), this.src)
          },
          false
        )
      }
    }
  }
}
</script>

2.子页面监听父页面消息，并向父页面发送数据

// 向父vue页面发送信息
        window.parent.postMessage({
            cmd: 'returnHeight',
            params: {
              success: true,
              data: document.body.scrollHeight + 'px'
            }
        }, '*');
 
        // 接受父页面发来的信息
        window.addEventListener("message", function(event){
          var data = event.data;
          switch (data.cmd) {
            case 'getFormJson':
                // 处理业务逻辑
                break;
            }
        });