HTML5中postMessage实现跨域的方法-创新互联

创新互联专注于企业成都营销网站建设、网站重做改版、吉阳网站定制设计、自适应品牌网站建设、H5网站设计、成都商城网站开发、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为吉阳等各大城市提供网站开发制作服务。

对于使用H5实现跨域，很多人都一直处于半懂状态。知道使用postMessage发送消息，使用onMessage接受消息，但是到底哪个方法应该用window调用哪个应该用iframe的contentWindow调用不是很清楚。下面是我做的一个本地实现跨域的小demo，可以在github下载这个示例。为了执行它，首先，你需要找到你电脑的hosts文件，在127.0.0.1 localhost下添加如下代码：

127.0.0.1   localhost
127.0.0.1   main.com
127.0.0.1   A.com
127.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消息的回执信息。

这应该是很常见的场景，把网站公共的资源放到某子域，在其他子域需要访问该子域上的资源。

基本知识

首先介绍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

    <h2>This is the main domain</h2>
    <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;">
        <h4>iframe A</h4>
        <iframe src="http://a.com:8090/subAdomain.html" frameborder="1" style="width:300px; height:300px;"></iframe>
    </div>
    <div style="float:left;">
        <h4>iframe B</h4>
        <iframe src="http://b.com:8090/subBdomain.html" frameborder="1" style="width:300px; height:300px;"></iframe>
    </div>
    <div style="float:left;">
        <h6 id="received"></h6>
    </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

       <h6>This is domain A</h6>
    <textarea name="subA" cols="30" rows="10"></textarea>
    <input type="button" value="send to parent"/>
    <div style="float:left;">
        <h6 id="received"></h6>
    </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

    <h6>This is domain B</h6>
    <textarea name="subB" cols="30" rows="10"></textarea>
    <input type="button" value="send to parent"/>
    <div style="float:left;">
        <h6 id="received"></h6>
    </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中postMessage实现跨域的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站栏目：HTML5中postMessage实现跨域的方法-创新互联
路径分享：https://www.cdcxhl.com/article24/dodpje.html

成都网站建设公司_创新互联，为您提供企业建站、品牌网站制作、网站建设、服务器托管、网站维护、微信小程序

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容