您的位置:首页 > Web前端 > HTML5

html5 postMessage解决iframe跨协议跨域通信问题

2016-11-23 14:06 567 查看

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"}', "*"); //*允许跨域   

3.跨协议(h5做的app访问网页交换信息)

直接双击运行a.html也可完美运行.(此时a.html的访问协议为file:/// 而login.html的访问协议为http://  暂未查到其他可用的跨协议跨域通信办法,查到的办法都是http协议下的通信).   参考:http://www.cnblogs.com/vajoy/p/4295825.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: