传统的iframe资源解决方式：主要通过通过中间页面代理，此处不再赘述，参考 中间页获取跨域iframe
随着HTML5的发展，html5工作组提供了两个重要的接口： postMessage(send) 和 onmessage 。这两个接口有点类似于websocket，可以实现两个跨域站点页面之间的数据传递。
postMessage API
下面是实践过程中两个小栗子：分别父页面传递信息给iframe，iframe传递信息给父页面。
话不多说，直接上码：
参考demo： 父页面传给子页面demo
崔涣 iframe postmessage 父页面
崔涣测试子页面信息
demo 效果如下图：两个跨域页面之间，父页面给子页面传递数据。
参考demo： 跨域子页面传给父页面demo
崔涣测试父页面
崔小涣iframe postmessage 测试页面
demo 效果如下图：两个跨域页面之间，子页面传递数据给父页面传递数据。
postmessage 传送过来的信息如下图，
几乎包含了所有应该有的信息。甚至data中可以包含object，出于安全考虑可以域的校验，数据规则的校验安全校验，如下代码
window.addEventListener('message', function (event) { //校验函数是否合法 var checkMessage = function () { // 只获取需要的域，并非所有都可以跨域 if (event.origin != "need domain") { return false; } var message = event.data; // 传输数据类型校验 if (typeof(message) !== 'object') { return false; } // message 的rule中包含xxx则为xxx需要字段。 return message.rule === "xxx"; }; if (checkMessage()) { // 通过校验进行相关操作 addDetailFunc(event); } }); 【转载请注明： postMessage处理iframe 跨域问题 | 靠谱崔小拽 】
下载本文