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

 

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

直接双击运行a.html也可完美运行.(此时a.html的访问协议为file:/// 而login.html的访问协议为http://  暂未查到其他可用的跨协议跨域通信办法,查到的办法都是http协议下的通信).

 

参考:http://www.cnblogs.com/vajoy/p/4295825.html