`
sean2012
  • 浏览: 45940 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

window.name实现的跨域数据传输

阅读更多

有三个页面:

  • a.com/app.html:应用页面。
  • a.com/proxy.html:代理文件,一般是一个没有任何内容的html文件,需要和应用页面在同一域下。
  • b.com/data.html:应用页面需要获取数据的页面,可称为数据页面。

实现起来基本步骤如下:

  1. 在应用页面(a.com/app.html)中创建一个iframe,把其src指向数据页面(b.com/data.html)。
    数据页面会把数据附加到这个iframe的window.name上,data.html代码如下:
<script type="text/javascript">
    window.name = 'I was there!';    // 这里是要传输的数据,大小一般为2M,IE和firefox下可以大至32M左右
                                     // 数据格式可以自定义,如json、字符串
</script>

 

  1. 在应用页面(a.com/app.html)中监听iframe的onload事件,在此事件中设置这个iframe的src指向本地域的代理文件(代理文件和应用页面在同一域下,所以可以相互通信)。app.html部分代码如下:
<script type="text/javascript">
    var state = 0, 
    iframe = document.createElement('iframe'),
    loadfn = function() {
        if (state === 1) {
            var data = iframe.contentWindow.name;    // 读取数据
            alert(data);    //弹出'I was there!'
        } else if (state === 0) {
            state = 1;
            iframe.contentWindow.location = "http://a.com/proxy.html";    // 设置的代理文件
        }  
    };
    iframe.src = 'http://b.com/data.html';
    if (iframe.attachEvent) {
        iframe.attachEvent('onload', loadfn);
    } else {
        iframe.onload  = loadfn;
    }
    document.body.appendChild(iframe);
</script>

 

  1. 获取数据以后销毁这个iframe,释放内存;这也保证了安全(不被其他域frame js访问)。
<script type="text/javascript">
    iframe.contentWindow.document.write('');
    iframe.contentWindow.close();
    document.body.removeChild(iframe);
</script>

 

总结起来即:iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。

分享到:
评论

相关推荐

    window.name解决跨域问题的文档

    后来,Kris Zyp 在此方法的基础上强化了 window.name 传输,并引入到了 Dojo(dojox.io.windowName),用来解决跨域数据传输问题。 window.name 传输技术的美妙之处在于:name 值在不同的页面(甚至不同域名)加载...

    javascript跨域总结之window.name实现的跨域数据传输

    而window.name实现的跨域数据传输方法,可以在一定程度上绕过这个限制。 在window.name实现跨域数据传输的过程中,主要有三个关键的步骤: 1. 在应用页面(***/app.html)中创建一个iframe,设置其src属性为数据...

    window.name解决跨域数据传输问题

    原文:http://research.microsoft.com/~helenw/papers/subspace.pdfwindow.name 传输技术,原本是 Thomas Frank 用于解决 cookie 的一些劣势(每个域名 4 x 20 Kb 的限制、数据只能是字符串、设置和获取 cookie 语法...

    javascript使用window.name解决跨域问题第1/2页

    后来 Kris Zyp 在此方法的基础上强化了 window.name 传输 ,并引入到了 Dojo (dojox.io.windowName),用来解决跨域数据传输问题。window.name 传输技术的基本原理和步骤为: name 在浏览器环境中是一个全局/window...

    windowName跨域详解.pdf

    在跨域资源访问的场景下,window.name属性被广泛地用来实现安全的数据传输。 首先,window.name属性能够在不同的页面加载后仍然保持不变,前提是该属性未被重新赋值。这一特性允许开发者在iframe加载新页面后,依然...

    window.open父子窗口传值问题

    在Web开发中,`window.open` 是一个JavaScript函数,它用于打开新的浏览器窗口或标签页。...当我们谈论“window.open父子窗口传值问题”,...在实际操作中,应结合代码进行调试和测试,以确保数据传输的正确性和安全性。

    JavaScript使用HTML5的window.postMessage实现跨域通信例子

    JavaScript由于同源策略的限制,跨域通信一直是棘手的问题。... window.name 保存数据以及跨域 iframe 静态代理动态传输方案,充分的运用了window.name因为页面的url改变而name不改变的特性。 各种方案

    PHP下ajax跨域的解决方案之window.name实例分析

    这一特性使得`window.name`成为跨域数据传输的一种方法。下面我们将通过实例来分析如何利用`window.name`实现跨域通信。 首先,假设我们有两个网站,`www.a.com`和`www.b.com`,目标是在`www.a.com/a.html`中获取`...

    javascript跨域的方法汇总.docx

    然后,通过A页面的代理文件C.html(与A页面同源),A页面可以安全地读取到`iframe`中的`window.name`,实现跨域数据传输。 4. `window.location.hash`和`iframe` 此方法结合了`hash`和`iframe`,B页面将数据编码后...

    JS跨域调用Window服务代码示例

    在JavaScript(JS)中,由于同源策略的限制,我们不能直接从网页中访问其他不同源(协议、域名或端口)的资源。然而,为了实现特定功能,如跨域...应采取安全措施,如证书验证、授权机制等,以确保数据传输的安全性。

    iframe跨域解决方案

    在Web开发中,跨域(Cross-Origin)是一个常见的挑战,特别是在构建复杂应用或者需要整合不同来源数据时。浏览器的同源策略(Same-Origin Policy)是为保障...因此,在实现跨域通信的同时,务必确保数据传输的安全性。

    前端常见跨域解决方案(全)

    8. WebSocket协议跨域:WebSocket协议提供双向通信,允许客户端和服务器之间建立持久连接,实现跨域数据传输。 这些跨域解决方案各有优缺点,开发者应根据实际需求选择合适的方法。例如,JSONP适用于简单的GET请求...

    js 实现iframe 之间传值

    另一种在`iframe`之间传递数据的方法是利用`window.name`属性。这个属性是持久性的,即使页面重载也不会丢失,且不受同源策略限制。例如: ```javascript // 父页面 var iframe = document.getElementById('...

    cross-origin::cyclone: 跨域demo。CORS、JSONP、postMessage、websocket、document.domain、window.name、iframe等示例

    原理用node的web框架express在3000端口和3001端口分别开启一个静态服务器,在两个端口间进行跨域传输数据。3000端口: 为前端界面,前端静态资源放在3000端口的服务器上3001端口: 为后端接口服务器目录Set Up运行环境...

    JavaScript实现的双向跨域插件分享

    对于那些不支持`postMessage`方法的旧浏览器(如IE6、IE7),可以使用`window.name`方法来实现跨域通信。`window.name`属性在浏览器的同一窗口(或iframe)的整个生命周期内保持不变,且跨域修改它的值不会触发同源...

Global site tag (gtag.js) - Google Analytics