iframe 跨源通信

当时的项目需求是前端iframe嵌套BI的页面，点击BI中的按钮，发送数据给前端，前端页面重新渲染更新。

postMessage() 方法用于安全地实现跨源通信。

Window postMessage() 方法 | 菜鸟教程

1. 发送程序

        receiver.postMessage("Hello "+val+"！", "https://c.runoob.com");

2. 接收程序（添加事件监听）

        window.addEventListener('message', function (e) { // 监听 message 事件 alert(e.origin); if (e.origin !== "https://www.runoob.com") { // 验证消息来源地址 return; } messageEle.innerHTML = "从"+ e.origin +"收到消息： " + e.data; });

• e.source – 消息源，消息的发送窗口/iframe。
• e.origin – 消息源的 URI(可能包含协议、域名和端口)，用来验证数据源。
• e.data – 发送过来的数据
• 

         判断是那个触发的

         

3. 移除事件监听