本篇文章给大家带来的内容是关于html5中postmessage实现跨域的代码分析，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
对于使用h5实现跨域，很多人都一直处于半懂状态。知道使用postmessage发送消息，使用onmessage接受消息，但是到底哪个方法应该用window调用哪个应该用iframe的contentwindow调用不是很清楚。下面是我做的一个本地实现跨域的小demo，可以在github下载这个示例。为了执行它，首先，你需要找到你电脑的hosts文件，在127.0.0.1 localhost下添加如下代码：
127.0.0.1 localhost127.0.0.1 main.com127.0.0.1 a.com127.0.0.1 b.com
然后，你需要启动一个服务器，如apache等，把github上下载的三个html文件放到你的服务器上。最后，你只需访问http://main.com:你的端口号 ，就可以进行跨域通信了。
三个html文件的关系如下：三个域：http://main.com:8090 ； http://a.com:8090 ； http://b.com:8090 。 主页面maindomain.html在main.com，两个iframe (subadomain.html , subbdomain.html)分别在 a.com , b.com 。在maindomain.html中，向textarea中输入消息，点击send to iframe按钮，可以发送消息到指定iframe (subadomain.html 或者subbdomain.html)，在ifame中也可以发送消息到maindomain.html，同时，有一个收到ifame消息的回执信息。
这应该是很常见的场景，把网站公共的资源放到某子域，在其他子域需要访问该子域上的资源。实现的效果如下。
1、不带回执信息：
2、带回执信息：
基本知识
首先介绍onmessage事件中，event的一些属性，理解这些可以使你很容易读懂我的示例。
* data: 传入的数据
* origin: 发送消息的文档所在的域
* source: 发送消息的文档的window对象的代理
如果你想在子域x向子域y发送消息，你需要，在子域x的html文件，获取y的window对象（iframe的contentwindow），然后调用postmessage(message, y所在的域)，同时，在子域y的html文件中，监听window对象message事件（使用onmessage）就好。当然，你可以在onmessage中再次使用postmessage，向子域x发送一个回执信息。 我们时常混乱的是，在哪个域的window对象上调用postmessage。
代码
main.com
<h1>this is the main domain</h1> <div style="margin:0 20px;"> <textarea name="main" cols="80" rows="5"></textarea><br/> <input type="button" value="send to iframe a"/> <input type="button" value="send to iframe b"/> </div> <div style="float:left; margin:0 20px;"> <h3>iframe a</h3> <iframe src="http://a.com:8090/subadomain.html" frameborder="1" style="width:300px; height:300px;"></iframe> </div> <div style="float:left;"> <h3>iframe b</h3> <iframe src="http://b.com:8090/subbdomain.html" frameborder="1" style="width:300px; height:300px;"></iframe> </div> <div style="float:left;"> <h5 id="received"></h5> </div> <script> var received = document.queryselector('#received'); var sendtoiframea = document.queryselectorall('input')[0]; var sendtoiframeb = document.queryselectorall('input')[1]; var iframea = document.queryselectorall('iframe')[0]; var iframeb = document.queryselectorall('iframe')[1]; //receive message function getmessage(e){ console.log('main received!'); received.innerhtml = 'receive message from ' + e.origin + ', the data is ' + e.data; e.source.postmessage('received the message', e.origin); } window.addeventlistener('message', getmessage, false); //post message sendtoiframea.addeventlistener('click', function(){ var content = document.queryselector('textarea').value; iframea.contentwindow.postmessage(content, 'http://a.com:8090'); }, false); sendtoiframeb.addeventlistener('click', function(){ var content = document.queryselector('textarea').value; iframeb.contentwindow.postmessage(content, 'http://b.com:8090'); }, false); </script>
a.com
<h5>this is domain a</h5> <textarea name="suba" cols="30" rows="10"></textarea> <input type="button" value="send to parent"/> <div style="float:left;"> <h5 id="received"></h5> </div> <script> var send = document.queryselector('input'); var text = document.queryselector('textarea'); var received = document.queryselector('#received'); //receive message function getmessage(e){ console.log('a received!'); received.innerhtml = 'receive message from ' + e.origin + ', the data is ' + e.data; //e.source.postmessage('received the message', e.origin); } window.addeventlistener('message', getmessage, false); //post message send.addeventlistener('click', function(){ var content = text.value; window.parent.postmessage(content, 'http://main.com:8090'); }, false); </script>
b.com
<h5>this is domain b</h5> <textarea name="subb" cols="30" rows="10"></textarea> <input type="button" value="send to parent"/> <div style="float:left;"> <h5 id="received"></h5> </div> <script> var send = document.queryselector('input'); var text = document.queryselector('textarea'); var received = document.queryselector('#received'); //receive message function getmessage(e){ console.log('b received!'); received.innerhtml = 'receive message from ' + e.origin + ', the data is ' + e.data; //e.source.postmessage('received the message', e.origin); } window.addeventlistener('message', getmessage, false); //post message send.addeventlistener('click', function(){ var content = text.value; window.parent.postmessage(content, 'http://main.com:8090'); }, false); </script>
相关文章推荐：
html5应用：离线的应用以及存储的应用
html5 canvas实现中奖转盘的实例代码
html5中postmessage实现子父窗口传值的代码
以上就是html5中postmessage实现跨域的代码分析的详细内容。