跨域传递数据（iframe）, postMessage用法

1. Window postMessage() 方法

 

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

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

        message：要传递的数据

        targetOrigin： 指定哪些窗口能接收到消息事件，其值可以是 *（表示无限制）或者一个                                 URI。

        transfer： 可选，是一串和 message 同时传递的 Transferable 对象。

                        这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

2. A页面为父页面，A页面中嵌套B页面（iframe）

    <div class="index-map">
      <iframe
        id="child"
        
        src="https://www.thingjs.com/s/cf19ea9f54dd9329e499bd5e"
        frameborder="0"
      ></iframe>
    </div>


    <script>
        // 接收消息
        mounted() {
            window.addEventListener("message", function (e) {
              if (e.origin == "https://www.thingjs.com") {
                console.log("e====", e)
              }
            });
          },
           // e.data: 发送过来的数据
           // e.origin: 消息源的 URI(可能包含协议、域名和端口)，用来验证数据源
           // e.source: 消息源，消息的发送窗口/iframe
    </script>

3. B页面为iframe页面，即A页面中src所指页面

<template>
  <div id="app">
    <button @click="add">点击</button>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
methods: {
    add() {
        let message = {
            id: 1
        }
        // top.postMessage(111,'*');

        top.postMessage(message ,'*');
    }
}
};
</script>

4. 下面错是top.postMessage(message ,'*') 中的message 传的格式不对