近乎完美的简单 JS 跨域解决方式 --window.name

当然，“近乎完美”仅仅是个人观点，但如下所述，它确实简单而颇有效益！

一直在寻求一种自己满意的 JS 跨域方式（这里是指任意跨域），曾经了解过：

1. 即时插入 script 元素的方式，会让脚本立即执行，不安全，并且需要与跨域的远端做好约定——比如变量名。细节较为繁琐。
2. 写 iframe 的 location.hash 的方式，会导致历史记录的产生，且数据量有限，同时，因为 URL 的内容可视，既不好看也容易泄露信息。
3. 用代理？ 虽然算是最“正宗”的完整跨域方案，但太麻烦了点——首先得有代理，如果量大的话，代理的负担会很重，会导致“瓶颈”制约。
4. 利用 Flash 跨域，不在考虑之列——复杂了些，并且那不算是 JS 跨域。

无意中看到一篇文章《使用 window.name 解决跨域问题》……豁然开朗！ 俺的问题终于解决了。

对那个实现小改了一下，加了浏览器本地设置 Window.name 的功能，实现浏览器“本地”异域数据的传递（如从浏览器窗口A传递数据到窗口B，仅在本地进行，且两个域不同）——这会产生一个很蛙王的应用（下一篇文章《普通 http 网络下数据的安全传输》将详细说明，本文后有少量提及）。感谢网络！ 也感谢愿意分享的技术达人！

下面贴出俺的代码，也分享一下，呵呵……
（注意：本地需要创建一个名为 proxy.html 的空文件）

(function() {

    var _isIE = (
        navigator.appName == "Microsoft Internet Explorer"
    );

    var _removeNode = _isIE ? function() {
        var d;
        return function(n) {
            if(n && n.tagName != 'BODY') {
                d = d || document.createElement('div');
                d.appendChild(n);
                d.innerHTML = '';
            }
        }
    }() : function(n) {
        if(n && n.parentNode && n.tagName != 'BODY') {
            n.parentNode.removeChild(n);
        }
    };


/* [ Request by window.name ]
 * ****************************************************************************
   借助 Window.name 实现 Js 的跨域访问。
   1、 url 向外传值， callback 处理返回结果。
   2、 返回页面中 JS 对 window.name 赋值。

   返回页
   <script language="JavaScript">
       window.name = ...  // 支持 JSON 字符串，可达~2MB
   </script>

   若需同时进行多个请求，回调函数应是不同的函数实例。
   iframe 的自由载入形成了异步机制。
*/

    wnRequest = {
        _doc: document,
        _proxyUrl: 'proxy.html'
    };

    wnRequest.send = function( url, callback )
    {
        if(! url || typeof url !== 'string') {
            return;
        }
        url += (url.indexOf('?') > 0 ? '&' : '?') + 'windowname=get';

        var frame = this._doc.createElement('iframe');
        frame._state = 0;
        this._doc.body.appendChild(frame);
        frame.style.display = 'none';

        (function( el, type, fn ) {
            if (_isIE) {
                el.attachEvent('on' + type, fn);
            } else {
                el.addEventListener(type, fn, false);
            }
        })(frame, 'load', function() {
            if(frame._state == 1) {
                _getData(frame, callback);
            } else if(frame._state == 0) {
                frame._state = 1;
                //frame.contentWindow.location = wnRequest._proxyUrl;
                frame.contentWindow.location.replace(wnRequest._proxyUrl);
            }
        });
        frame.src = url;
    };

    //
    // 设置异域 Js 可访问的本地数据，客户端直接站间转递数据
    // 注：
    // 即浏览器直接将数据转递给另一个域的窗口，数据不上网。
    // 返回页代码：
    // <script type="text/javascript">
    //     if (window.name) {
    //         //... 处理 name 值
    //         window.name = null;
    //     }
    //     // 升为顶级窗口，完成数据转递
    //     try {
    //         top.location.hostname;
    //         if (top.location.hostname != window.location.hostname) {
    //             top.location.href =window.location.href;
    //         }
    //     } catch(e) {
    //         top.location.href = window.location.href;
    //     }
    // </script>
    //
    //
    wnRequest.setname = function( name, url ) {
        if(! url || typeof url !== 'string') {
            return;
        }
        url += (url.indexOf('?') > 0 ? '&' : '?') + 'windowname=loc';

        var frame = this._doc.createElement('iframe');
        frame._count = 0;
        this._doc.body.appendChild(frame);
        frame.style.display = 'none';
        if (_isIE) {
            frame.name = name;
        } else {
            frame.contentWindow.name = name;
        }
        frame.src = url;
    };

    //
    // 私用辅助
    //
    var _clear = function(frame) {
        try {
            frame.contentWindow.document.write('');
            frame.contentWindow.close();
            _removeNode(frame);
        } catch(e) {}
    }

    var _getData = function(frame, callback) {
        try {
            var da = frame.contentWindow.name;
        } catch(e) {}
        _clear(frame);
        if(callback && typeof callback === 'function') {
            callback(da);
        }
    }

})();

使用：
如果需要同时访问多个异域文件，可以像下面这样写回调函数，浏览器异步载入 iframe 的机制形成了天生的 JS 跨域异步访问。
这是跨域请求的主页面 JS 调用：

<script language="javascript">
    var _str = '', _cnt = 0;

    function myfunc( id ) {
        return  function( data ) {
            _str += id + ':' + data + '\n';
            ++_cnt;
            if (_cnt >= 4)  alert(_str);
        };
    }

    var _links = [
        { id: 4, url: 'http://www.aaa.com/test4.html' },
        { id: 5, url: 'http://www.bbb.com/test5.html' },
        { id: 6, url: 'http://www.ccc.com/test6.html' },
        { id: 7, url: 'http://www.ddd.com/test7.html' }
    ];
    function dosome() {
        for (var _i=0; _i<_links.length; ++_i) {
            wnRequest.send(_links[_i].url, myfunc(_links[_i].id));
        }
        // 跨域本地数据转递
        wnRequest.setname('这里可能是一串加密用的密钥哦，俺从 https 那边过来滴！', 'http://www.eee.com/test8.html');
    }
</script>

http://www.aaa.com/test4.html 中的内容：（跨域网络数据传递）

<script type="text/javascript">
    window.name='返回的数据，可以是 JSON 格式';
</script>

http://www.eee.com/test8.html 中的内容：（跨域本地数据转递应用。注意：这里是普通的 http 协议）

<script type="text/javascript">
    if (window.name) {
        alert(window.name);
        // 存储或处理 name 值
        // 可存在 Cookie 中，如果不希望 Cookie 上传泄露出去，可设置其 secure 属性
        window.name = null;
    }
    /*
    try {
        top.location.hostname;
        if (top.location.hostname != window.location.hostname) {
            top.location.href =window.location.href;
        }
    } catch(e) {
        top.location.href = window.location.href;
    }
    */
</script>

呵呵……是否期待下一篇文章《普通 http 网络下数据的安全传输》呢？

注： 附件包含本跨域实现和前几篇关于 JS 文字加密算法的实现代码。

===============================================================================
修 订：

frame.contentWindow.location = wnRequest._proxyUrl;

如此赋值在 firefox 中会导致历史记录的产生，可用 Location.replace() 代替，如下：

frame.contentWindow.location.replace(wnRequest._proxyUrl);

评论

13 楼 leafxf 2012-07-09  

这个和直接引用js有多大不同和优点?

12 楼 zhangyg 2011-05-11  

我怎么不行，我在执行到 var _getData = function(frame, callback) {
    var data="";
    try
    {
   
    data=frame.contentWindow.name;
   
    }
    catch(e)
    {
    alert(e.message +"," + e.description);
    }
      
        _clear(frame);
        if(callback && typeof callback === 'function') {
            callback(data);
          
        }
    }
catch 到的错误是拒绝访问

11 楼 Liner 2011-02-14  

sw1982 写道

jsonp才是正经的方案啊，呵呵

考虑过……
但 jsonp 没法实现浏览器本地的跨域传递数据，应用见《普通 http 网络下数据的安全传输》

>>即时插入 script 元素的方式，会让脚本立即执行，不安全，并且需要与跨域的远端做好约定……
jsonp 较适于对所跨的域的有较大控制权的情况，如果异域的 JS 不按规则办事，则可以破坏本域的 JS 逻辑。而 window.name 不存在这样的情况。

10 楼 sw1982 2011-02-14  

jsonp才是正经的方案啊，呵呵

9 楼 thihy 2011-02-10  

个人觉得不如JSONP

8 楼 guoshiguan 2011-02-10  

可以跨浏览器吗，

7 楼 十三‘’ 2011-02-10  

简单实用，很不错

6 楼 Liner 2011-02-10  

la_ka 写道

为什么setname()在send()的后面啊？ 这样那些URL能得到传值吗？ 不是很明白，，请指点啊

那只是个“用法”的示例，不是具体的应用

引用

for (var _i=0; _i<_links.length; ++_i) { 
        wnRequest.send(_links[_i].url, myfunc(_links[_i].id)); 
}

批量 send 的用法

引用

wnRequest.setname('这里可能是一串加密用的密钥哦，俺从 https 那边过来滴！', 'http://www.eee.com/test8.html');

本地不同域数据转递的用法

5 楼 la_ka 2011-02-09  

# for (var _i=0; _i<_links.length; ++_i) { 
#             wnRequest.send(_links[_i].url, myfunc(_links[_i].id)); 
#         } 
#         // 跨域本地数据转递 
#         wnRequest.setname('这里可能是一串加密用的密钥哦，俺从 https 那边过来滴！', 'http://www.eee.com

为什么setname()在send()的后面啊？ 这样那些URL能得到传值吗？ 不是很明白，，请指点啊

4 楼 la_ka 2011-02-09  

听说过，今天才知道JSONP是这样啊，多谢LZ了，其实还是没明白为什么要跨域去传这些东西，还是用JS。。。

3 楼 rainsilence 2011-02-08  

jsonp

2 楼 Liner 2011-02-05  

zhangxingliang 写道

这个方式，需要 A B域的东西都要在代码里做一点事情

还不如直接引用js

愿闻其详

1 楼 zhangxingliang 2011-02-05  

这个方式，需要 A B域的东西都要在代码里做一点事情

还不如直接引用js