H5API中基于postMessage的多域标签页数据通信

前言在网上找了很多多标签页的数据通信案例。大体原理是可以使用postMessage实现跨域问题通信。最后，当前方法可以简单计时多个标签页的数据通信代码：一个页面JS部分functionreceiveMessage(event){if(event.origin!=="http://localhost:63343"){返回；}}window.addEventListener("消息",receiveMessage,false);functiontestOneWindowOpen(){varpopup=window.open('http://localhost:63343/javascript_top/ifreamtest/test2.html');console.log('开始执行');setTimeout(function(){console.log('执行定时任务开始');popup.postMessage("用户是'bob'，密码是'secret'","http://localhost:63343/javascript_top/ireamtest/test2.html");console.log('执行定时器任务结束');},3000);console.log('执行结束');}functiontestTwoWindowOpen(){varpopup=window.open('http://localhost:63343/javascript_top/ireamtest/test3.html');console.log('开始执行');设置超时（功能（）{控制台。log('执行定时任务开始');popup.postMessage("用户是'bob'，密码是'secret'","http://localhost:63343/javascript_top/ireamtest/test3.html");console.log('执行定时任务结束');},3000);console.log('执行结束');}HTML部分点击发送第一个新窗口请求点击发送第二个新窗口请求页面B和pageC我的需求是当前主页使用window.open打开一个新窗口后，新窗口可以发送一些数据告诉主页一些结果网上找的很多案例都没有效果，因为主窗口（A）直接在window之后发送信息。对象监听，所以发送消息总会失败，所以这里必须延迟发送请求的执行，具体延迟取决于项目需求。同样的，postMessage方法可以直接判断发送的页面，让指定的页面监听自己的消息事件并返回相应的信息，主页面可以根据不同的返回信息在注册事件中单独处理。