Javascript使用postMessage对iframe跨域通讯

今天才发现原来有这么个好东西啊，跨域通讯太方便了，
举个小栗子：

共两个页面，

页面1：www.a.com/a.html
页面2：www.b.com/b.html

实现目标：两个网站页面实现跨域相互通讯
当前例子依赖于 jQuery 3.0

页面代码：www.a.com/a.html

<iframe id="myIframe" src="http://www.b.com/b.html"></iframe>
<script> var $myIframe = $('#myIframe'); // 注意：必须是在框架内容加载完成后才能触发 message 事件哦 $myIframe.on('load', function(){ var data = { act: 'article', // 自定义的消息类型、行为，用于switch条件判断等。。 msg: { subject: '跨域通讯消息收到了有木有~', author: 'CSDN-神神的蜗牛' } }; // 不限制域名则填写 * 星号, 不然请填写对应域名如 http://www.b.com $myIframe[0].contentWindow.postMessage(data, '*'); }); // 注册消息事件监听，对来自 myIframe 框架的消息进行处理 window.addEventListener('message', function(e){ if (e.data.act == 'response') { alert(e.data.msg.answer); } else { alert('未定义的消息: '+ e.data.act); } }, false); </script>

页面代码：www.b.com/b.html

<script> // 注册消息事件监听，对来自 myIframe 框架的消息进行处理 window.addEventListener('message', function(e){ if (e.data.act == 'article') { alert(e.data.msg.subject); // 向父窗框返回响应结果 window.parent.postMessage({ act: 'response', msg: { answer: '我接收到啦！' } }, '*'); } else { alert('未定义的消息: '+ e.data.act); } }, false); </script>

对不一样浏览器应该还须要一些兼容操做，我由于只使用 Chrome 因此就偷个懒不写啦，能够去网上搜搜。