js通过window.name页面传值,可以跨域

window.name是一个window对象下的属性,当我们在同一窗口浏览的时候,这个值都可以被页面读取,例如:

a页面:

<button onclick="toB()">打开b页面</button>
window.name = '传递的值';
function toB (){
   location.href = 'b.html';
}

 

b页面:

var aa = window.name;

alert(aa);

 

当然,在b页面里我们还可以对它进行重新赋值。另外,只要这个窗口没有被关闭,打开的页面都可以获取到,即使跨域的网页也是可以的,所以很多开发者用这个属性来进行js跨域操作。

window.name只能用来存放字符串,当然序列化的json也行,这样我们就可以通过这个属性进行数据交互啦,还是蛮实用的。

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

 

有三个页面:

 

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

实现起来基本步骤如下:

 

在应用页面(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>

在应用页面(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>

获取数据以后销毁这个iframe,释放内存;这也保证了安全(不被其他域frame js访问)。

<script type="text/javascript">

    iframe.contentWindow.document.write('');

    iframe.contentWindow.close();

    document.body.removeChild(iframe);

</script>

自己实践了一下,真的很好用。

特将具体实现方法记录如下:

 

如a.com网站想通过JS获取b.com网站的数据。

 

1 在a.com网站添加一个空HTML页。名称为:http://a.com/null.html

2 在a.com网站需要获取数据页面(如:http://a.com/getDomainData.html)内容如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>跨域获取数据</title>

    <script type="text/javascript">

    function domainData(url, fn)

    {

        var isFirst = true;

        var iframe = document.createElement('iframe');

        iframe.style.display = 'none';

        var loadfn = function(){

            if(isFirst){

                iframe.contentWindow.location = 'http://a.com/null.html';

                isFirst = false;

            } else {

                fn(iframe.contentWindow.name);

                iframe.contentWindow.document.write('');

                iframe.contentWindow.close();

                document.body.removeChild(iframe);

                iframe.src = '';

                iframe = null;

            }

        };

        iframe.src = url;

        if(iframe.attachEvent){

            iframe.attachEvent('onload', loadfn);

        } else {

            iframe.onload = loadfn;

        }

         

        document.body.appendChild(iframe);

    }

    </script>

</head>

<body>

 

</body>

    <script type="text/javascript">

    domainData('http://b.com/data.html', function(data){

        alert(data);

    });

    </script>

</html>

3 在b.com中添加获取数据页面 如:http://b.com/data.html 内容需包含:

<script>

  window.name = '需要跨域传递的数据';

</script>

4 访问 http://a.com/getDomainData.html 就可返回 http://b.com/data.html 中的window.name中的数据了。

需要注意的地方

null.html 是必须的。内容可为空。

 iframe的onload事件绑定 必须这样写:

 
if(iframe.attachEvent){
     iframe.attachEvent('onload', loadfn);
} else {
     iframe.onload = loadfn;
}

调用domainData函数必须在body后面,或页面加载完后。

调用时会执行 http://b.com/data.html 页面的脚本。

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索iframe
, 文件
, 数据
, 应用
, 事件
属性
,以便于您获取更多的相关知识。

时间: 2024-10-28 12:01:46

js通过window.name页面传值,可以跨域的相关文章

Node.js配合node-http-proxy解决本地开发ajax跨域问题_node.js

情景: 前后端分离,本地前端开发调用接口会有跨域问题,一般有以下3种解决方法: 1. 后端接口打包到本地运行(缺点:每次后端更新都要去测试服下一个更新包,还要在本地搭建java运行环境,麻烦) 2. CORS跨域:后端接口在返回的时候,在header中加入'Access-Control-Allow-origin':* 之类的(有的时候后端不方便这样处理,前端就蛋疼了) 3. 用nodejs搭建本地http服务器,并且判断访问接口URL时进行转发,完美解决本地开发时候的跨域问题.  用到的技术:

JS编程建议——61:使用闭包跨域开发

建议61:使用闭包跨域开发闭包是指词法表示包括不必计算的变量的函数,闭包函数能够使用函数外定义的变量.闭包结构有以下两个比较鲜明的特性.(1)封闭性外界无法访问闭包内部的数据,如果在闭包内声明变量,外界是无法访问的,除非闭包主动向外界提供访问接口.(2)持久性对于一般函数来说,在调用完毕之后,系统会自动注销函数,而对于闭包来说,在外部函数被调用之后,闭包结构依然保存在系统中,闭包中的数据依然存在,从而实现对数据的持久使用.例如:function f( x ){ var a = x; var b

window.opener方法的使用 js跨域

原文:window.opener方法的使用 js跨域 最近公司网站登陆加入了第三方登陆.可以用QQ直接登陆到我们网站,在login页面A中点QQ登陆时,调用了一个window.open文件打开一个login页窗口B,登陆后callback地址回调成功后,需要关闭当前window.open打开的login小窗口B,再将打开这个小窗口的原窗口页(A)刷新显示正确状态. 这时就用到了这个方法: window.opener.location.reload() 与 window.opener.locati

js中window.opener方法的跨域问题分析

最近公司网站登陆加入了第三方登陆.可以用QQ直接登陆到我们网站,在login页面A中点QQ登陆时,调用了一个window.open文件打开一个login页窗口B,登陆后callback地址回调成功后,需要关闭当前window.open打开的login小窗口B,再将打开这个小窗口的原窗口页(A)刷新显示正确状态. 这时就用到了这个方法: window.opener.location.reload() 与 window.opener.location.href=window.opener.locat

父子页面之间跨域通信的方法(转)

由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇"跨域,不再纠结" 开始照着尝试时还是有些不够明白的地方,深入了解之后,这里给大家补充一点更具体的做法. 先来看看哪些情况下才存在跨域的问题: 其中编号6.7两种情况同属于主域名相同的情况,可以设置domain来解决问题,今天就不讨论这种情况了. 对于其他跨域通信的问题,我想又可以分成两类: 其一(第一种情况)是a.com

浅谈js中几种实用的跨域方法原理详解_javascript技巧

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对http://store.company.com/dir/page.html同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 一.通过jsonp跨域 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同

js实现跨域的4种实用方法原理分析_javascript技巧

什么是js跨域呐? js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 要解决跨域的问题,我们可以使用以下几种方法: 一.通过jsonp跨域 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的. 比如,有个a.html页面,

js中几种实用的跨域方法原理详解

1.这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. (1)下表给出了相对http://store.company.com/dir/page.html同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 一.通过jsonp跨域 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面

js利用iframe实现跨域通信例子

为了方便演示跨域效果,先在 hosts 文件中加上以下内容: 127.0.0.1 www.myapp.com 127.0.0.1 sample.myapp.com 127.0.0.1 www.otherapp.com 下面我们就开始讨论如何使用iframe进行跨域通信,这里主要介绍以下几种方案: document.domain .URL.hash . Cross-fragment . Window.name . postMessage . document.domain 如果 A 源和 B 源具