html5 postMessage

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

postMessage的使用方法
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的支持情况，测试结果如下: