html5 postMessage解决iframe跨协议跨域通信问题
a.html有个iframe载入b.com/login.html,当login完成时通知a.html页面登录完成并传递UserName
1.a.html 监听消息
window.addEventListener('message', function (event) { // 通过origin属性判断消息来源地址 //if (event.origin == 'http://127.0.0.1:10847') { console.log(event.data); alert(event.data+'|'+typeof(event.data)); // 弹出从子页面post过来的信息 //} }, false);
2.iframe内嵌页login.html postMessage
var ifr = window.parent; //获取父窗体
var targetOrigin = 'http://localhost:10847'; // 若写成 http://127.0.0.1:10847 则将无法执行postMessage
//ifr.postMessage('这是传递给a.html的信息', targetOrigin);
ifr.postMessage('{UserName:"zhangsan"}', "*"); //*允许跨域
//ifr.postMessage('这是传递给a.html的信息', targetOrigin);
ifr.postMessage('{UserName:"zhangsan"}', "*"); //*允许跨域
3.跨协议(h5做的app访问网页交换信息)
直接双击运行a.html也可完美运行.(此时a.html的访问协议为file:/// 而login.html的访问协议为http:// 暂未查到其他可用的跨协议跨域通信办法,查到的办法都是http协议下的通信).
参考:http://www.cnblogs.com/vajoy/p/4295825.html
作者:xuejianxiyang
出处:http://xuejianxiyang.cnblogs.com
关于作者:Heaven helps those who help themselves.
本文版权归原作者和博客园共有,欢迎转载,但未经原作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。