首页 > 代码库 > html5 postMessage

html5 postMessage

2024-07-24 21:53:27   218人阅读

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.net127.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的支持情况，测试结果如下:
 

html5 postMessage


联系
我们