html5 postMessage

hmtl5 推出postMessage后,在解决跨文档消息通信、及跨域请求数据的问题 时方便了很多。

一、postMessage的使用方法: 

otherWindow.postMessage(message, targetOrigin, [transfer]);
参数含义:
otherWindow:要接收信息页面的window的引用
message: 要发送的信息,可以是string,也可以是object,具体的兼容性请看文章最后
targetOrigin:标识要发向的哪个目标源,可以是一个url地址,也可是“*”表示不作限制
 
另一个页面可以通过以下的方式监听message事件
window.addEventListener("message", receiveMessage, false);

function receiveMessage(event){
  if (event.origin !== "http://example.org:8080")
    return;

  // ...
}

 

二、postMessage实例

下面我们用一个实例来看看postMessage的应用: 
为了实现不同域之间的通信,需要在操作系统的 hosts 文件添加两个域名,进行模拟。
 
代码1:hosts文件中添加两个不同的域名
127.0.0.1     sx.daily.taobao.net
127.0.0.1     sx.taobao.com

 

在父网页中通过 iframe 嵌入子页面。

代码2.
<!DOCTYPE html>
<html>
<head>
    <title>门户页</title>
    <meta charset="utf-8"/>
</head>
<body>
<div>
    输出的内容是:<span id="msg"></span>
</div>
<!-- 通过 iframe 嵌入子页面 -->
<iframe id="widget" src="http://sx.daily.taobao.net/study/postMessage/chat.html" frameborder="0"></iframe>

<script>
    var fromOrigin = "http://sx.daily.taobao.net";    //iframe来自的源
    function msgHandler(e){
        if(e.origin == fromOrigin){
            notify(e.data);
        }else{
            //忽视
        }
    }
    function notify(data){
        var msg = document.querySelector(‘#msg‘);
        msg.innerText = data.msg;
        console.log(data);
    }
    window.addEventListener(‘message‘,msgHandler,true);

</script>
</body>
</html>

 

在子窗口中监听 onmessage 事件,并在 JavaScript 代码中调用 postMessage 方法发送数据到父窗口
代码3.
<!DOCTYPE html>
<html>
<head>
    <title>聊天件</title>
    <meta charset="utf-8"/>
    <style>
        body{
            background: #fb0;
            height: 200px;
        }
    </style>
</head>
<body>
<h2>chat页面</h2>
<input id="txtCont" type="text" value=""/>
<button id="btnSend">发送</button>
<script>
   var targOrigin = "http://sx.taobao.com"; //要发向的目标源

    var btn = document.querySelector(‘#btnSend‘);
    var txt = document.querySelector(‘#txtCont‘);
    function sendMsg(){
        //支持情况 ie9及以上,注意,ie9只支持字符.部分ie8支持
        //chrome
        if(window.top.postMessage){
            //有些浏览器支持javascript对象,canvas imageData等数据类型
            //支持情况 ie9下不支持 ie9支持 postMessage的值为字符串,不支持对象。ie10及以上支持对象
            //如: {‘msg‘:txt.value}
            var obj = {‘msg‘:txt.value};
            // 通过 postMessage 向父窗口发送数据
            window.top.postMessage(obj,targOrigin);
        }
    };
    btn.addEventListener(‘click‘,sendMsg,true);

</script>

</body>
</html>

三、各个浏览器的支持情况 

写完上面的demo后,我所它放到常用的浏览器里测试了一下兼容性:
ie: 支持情况:
     ie8  我装的ie8不支持,但发现别的机器ie8支持。
     ie9  支持 postMessage的值为字符串,不支持对象。
     ie10 及以上支持对象
chrome: 支持
firefox: 支持
 
后来发现有个网站可以查看html5的支持情况,测试结果如下:
 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。