iframe 的使用 和跨域通信方法 历尽千辛万苦

iframe 标签的使用

 <iframe
        src={url} // 需要嵌入页面的地址
        frameBorder='0' // 清除自带边框
        name='选材算量'  // 当前iframe的名字
        title='选材算量'
        id='xuancaisuanliang' // iframe的id
        width={width || '100%'} // 宽
        height={height || '100%'} // 高
      ></iframe>

 

iframe 的跨域通信 

子通信父

父级需要在页面 绑定事件

 window.addEventListener('message', function (event) {
     const data=event.data;
      console.log(data); // 这是子通信返回父级的信息 获取
      // 判断域名
      if (event.origin === 'https://www.baidu.com') {
       //
      }
    });

子页面需要在点击按钮事件后 给父级通信

  window.parent.postMessage(
     {
        // 返回的参数  是一个对象 
     },
    '*',
   );

 解决多次通信问题

  问题描述

    

• 第一次运行console.log(data)只打印一次。到目前为止，这是预期的工作。
• 第二次运行console.log(data)打印两次。只能打印一次。
• 第三次运行console.log(data)打印三次。只能打印一次。

  每次运行Social Connect进程时，它应该只打印一次。但不知何故，它在随后的每次运行中都会添加一个副本。

  这种重复不断增加，直到用户刷新页面，这将开始计数回到1。

  我想在console.log(data)点上做更多的数据操作，但当它在随后的每次运行中创建重复副本时，我不能这样做。

  我该如何阻止这种情况发生？

  可能是因为侦听器事件没有分离？如果是这样，我该如何解决？

window.addEventListener("message", function( event ) {
     alert(1)
});
改成
window.onmessage=function(event){
   alert(666)
}

另一种解决方法（待验证）

您已经创建了一个匿名方法(event) => { }作为包装器，并将其附加到addEventListener方法。

window.addEventListener('message', event => receiveMessage(event), false);
它不能被移除

window.removeEventListener('message', receiveMessage);
要修复它，请进行如下更改：

window.addEventListener('message', receiveMessage, false);
同时，如果每次关闭窗口时方法receiveMessage都会丢失，那么最好将removeEventListener部分移到receiveMessage中。

const receiveMessage = (event)=> {
  window.removeEventListener('message', receiveMessage);
  // do something else
}