首页前端开发HTMLHTML5中postMessage实现跨域的代码分析

HTML5中postMessage实现跨域的代码分析

时间2024-01-23 15:12:20发布访客分类HTML浏览925
导读:收集整理的这篇文章主要介绍了HTML5中postMessage实现跨域的代码分析,觉得挺不错的,现在分享给大家,也给大家做个参考。本篇文章给大家带来的内容是关于HTML5中postMessage实现跨域的代码分析,有一定的参考价值,有需要的...
收集整理的这篇文章主要介绍了HTML5中postMessage实现跨域的代码分析,觉得挺不错的,现在分享给大家,也给大家做个参考。本篇文章给大家带来的内容是关于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实现跨域的代码分析的详细内容,更多请关注其它相关文章!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

上一篇: SVG画图功能:svg实现画出一朵花...下一篇:html5新增标签有哪些?html5新增...猜你在找的html5相关文章 关于移动端h5开发相关内容总结2022-05-17html5教程-学表单的第二天2018-12-10html5教程-HTML5浏览器支持2018-12-10html5教程-HTML5智能表单2018-12-10html5教程-微信H5使用resLoader实现加载页效果2018-12-10html5教程-day01-初级-JS0-热身运动JS入门教程2018-12-10html5教程-html5shiv.js和respond.min.js2018-12-10html5教程-不同浏览器对于html5 audio标签和音频格式的兼容性2018-12-10html5教程-使用Html5实现手风琴案例2018-12-10html5教程-html5笔记2018-12-10 其他相关热搜词更多phpjavapython程序员load

若转载请注明出处: HTML5中postMessage实现跨域的代码分析
本文地址: https://pptw.com/jishu/584348.html
svg中的symbol如何制作icon html5新增标签有哪些?html5新增的标签应用

游客 回复需填写必要信息