Javascript使用postMessage对iframe跨域通信 | 您所在的位置:网站首页 › iframe怎么通信 › Javascript使用postMessage对iframe跨域通信 |
今天才发现原来有这么个好东西啊,跨域通信太方便了, 举个小栗子: 共两个页面, 页面1:www.a.com/a.html 页面2:www.b.com/b.html 实现目标:两个网站页面实现跨域相互通信 当前例子依赖于 jQuery 3.0 页面代码:www.a.com/a.html 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);1234567891011121314151617181920212223242512345678910111213141516171819202122232425页面代码:www.b.com/b.html // 注册消息事件监听,对来自 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);12345678910111213141516171234567891011121314151617对不同浏览器应该还需要一些兼容操作,我因为只使用 Chrome 所以就偷个懒不写啦,可以去网上搜搜。 |
CopyRight 2018-2019 实验室设备网 版权所有 |