zoukankan      html  css  js  c++  java
  • javascript 跨域双向通信方案,通过postMessage和window.name实现

    更新:

    最近项目使用在node-webkit中用于iframe flash的调用,有一个json版本,设计方面还是有些缺陷,没有设计成mian,client可以1对多创建的方式,考虑重构

    此方案在IE6,7下面通过window.name实现跨域信息的传递,会导致一系列的BUG,项目中需要兼容的话,请使用以下技术处理

    http://www.alloyteam.com/2013/11/the-second-version-universal-solution-iframe-cross-domain-communication

    前言:

    专门从事js工作其实也有1年时间了,水平一般。获取前端相关的知识,主要通过 司徒正美的博客 和 司徒正美的QQ群-javascript罗浮宫。

    在去年的项目中,做消息推送的时候,由于推送服务部署在一个独立的服务上,后来试了一些方案,

    最后是通过window.name和postMessage结合的方式解决跨域问题,从而实现消息推送(AJAX 的长轮询).

    最近项目比较空,特地花了时间整理了下代码。当然跨域的实现,还是首推JSONP的方式

    作用:

    我们作为客户端,开放相关API给其他第3方进行访问

    (如果该js真的能解决你的需求,希望能支持下,让更多人得到方便)。

    原理:

    相关原理可以参考 http://js8.in/752.html,对于通过name的方式,本js加入了代理页(about:blank),不会污染主端window.name,结构下图

    功能:

    1.实现main.html和client.html之间的双向通信,通过提供相关Command。

    2.通过callback机制,可以方便的对返回的数据进行相应的处理。

    3.多参数支持,参数支持字符串,数字,通过加载JSON的js,支持object,数组

    例子:

      https://github.com/legu2009/cross-domain-javascript

      github上有相关例子的环境,可以安装nodejs,进行调试。(去掉注释,可支持json格式,例子简化了下,主要演示一个主端向客户端调用API的过程).

         mainAPI.html

    View Code
    <body>
    </body>
    <!--script type="text/javascript" src="http://localhost:9099/json2.js"></script-->
    <script type="text/javascript" src="http://localhost:9099/crossDomain.js"></script>
    <script>
    (function () {
        var host = '  main.html';//window.location.host;
        var slice = Array.prototype.slice;
        typeof console == "undefined" && (console = {
            log: function () {
                alert(slice.call(arguments).join(':'));
            }
        });
        var config = {
            clientUrl: "http://localhost:9098/clientAPI.html"
            //,aboutBlank: 'NO'
            //,isSameDomain: false
        };
        var crossDomain = getCrossDomain(config);
        /*
        crossDomain.message.set({
            params2str: function () {
                return JSON.stringify(slice.call(arguments, 0));
            },
            str2params: function (str) {
                return JSON.parse(str);
            }
        });*/
        
        function callback (str) {
            var str = slice.call(arguments).join(',') + '=>>';
            return function () {
                console.log(host+'@',str+slice.call(arguments).join(','));
            }
            //console.log(host+':'+slice.call(arguments, 0).join(','));
        }
        crossDomain.message.send('clientCall','hello,i\'m main');//调用命令
        crossDomain.message.send('clientCall','your name',callback('your name'));//调用命令,并显示返回值
        crossDomain.message.send('clientCall','your mail',callback('your mail'));
        crossDomain.message.send('clientCall','your mail', 'the date',{'aa':123},callback('your mail', 'the date',{'aa':123}));//多参数支持
    
    })();
    </script>

        clientAPI.html

    View Code
    <body>
    </body>
    <!--script type="text/javascript" src="http://localhost:9099/json2.js"></script-->
    <script type="text/javascript" src="http://localhost:9099/crossDomain.js"></script>
    <script>
    (function () {
        var host = 'client.html';//window.location.host;
        var slice = Array.prototype.slice;
        typeof console == "undefined" && (console = {
            log: function () {
                alert(slice.call(arguments).join(':'));
            }
        });
        var config = {
            clientUrl: "http://localhost:9098/clientAPI.html"
            //,aboutBlank: 'NO'
            //,isSameDomain: false
        };
        var crossDomain = getCrossDomain(config);
        /*
        crossDomain.message.set({
            params2str: function () {
                return JSON.stringify(slice.call(arguments, 0));
            },
            str2params: function (str) {
                return JSON.parse(str);
            }
        });*/
        
        var apiMap = {
            'your name': 'guwei',
            'your mail': '89415119@qq.com',
            'the date': new Date().toString()
        }
        crossDomain.clientCommand.add('clientCall', function(str, callback) {
            console.log(host+'@','clientCall:',slice.call(arguments));
            try {
                console.log(host+'@','aa:'+arguments[2].aa);//判断JSON支持
            } catch (e) {}
            var callback = arguments[arguments.length-1];
            var ary = slice.call(arguments, 0, -1);
            //console.log(host+':'+ary.join(','));
            for (var i =0;i<ary.length;i++) {
                ary[i] = apiMap[ary[i]]||ary[i];
            }
            callback.apply(null,ary);//即使有的API没有数据返回,也需要执行下callback
        });
    })();
    </script>

    执行结果:

      

  • 相关阅读:
    大数据学习13_MapReduce计数器&排序和序列化
    大数据学习12_MapReduce分区
    大数据学习11_MapReduce案例实战(单词统计)
    大数据学习10_Mapreduce
    大数据学习09_HDFS3
    周总结8
    《河北省重大技术需求征集系统》10_导入大量数据做测试
    《河北省重大技术需求征集系统》08_需求浏览
    《河北省重大技术需求征集系统》07_综合查询
    《河北省重大技术需求征集系统》06_网络审核
  • 原文地址:https://www.cnblogs.com/legu/p/2941390.html
Copyright © 2011-2022 走看看