javascript跨域之window.name

版权声明:本文为博主原创文章,未经博主允许不得转载。

 

前言

前面我们说了document.domain的跨域,今天我们来讲一下window.name跨域。

定义

name 属性可设置或返回存放窗口的名称的一个字符串。

说明

window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。

实例

demo页面的代码:

1
2
3
4
window.name = "我是demo页面的window.name值";
setTimeout(function(){
location.href = "demo2.html"
},3000)

demo2页面代码:

1
alert(window.name);

效果图:
效果图

下面是个返回新窗口名称的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window.name</title>
<script>
var myWindow;
function openWin(){
myWindow=window.open('','MsgWindow','width=200,height=100');
myWindow.document.write("<p>窗口名称为: " + myWindow.name + "</p>");
}
</script>
</head>
<body>
<input type="button" value="打开我的窗口" onclick="openWin()" />
</body>
</html>

上面我们看到window.name的值没有改变,但这是在同域的情况下,还不足以说明跨域,那window.name如何才能实现跨域呢?

我们在A域的demo页面创建一个iframe,其src指向B域的demo2页面。
B域的demo2页面代码如下:

1
window.name = '我是B域demo2页面的window.name值';//大小一般不能超过2M 每个浏览器可能会略有不同, 数据格式可以自定义,如json、字符串等。

在A域的demo页面中监听iframe的onload事件,在此事件中设置这个iframe的src指向本地域的代理文件proxy.html,代理文件和应用页面在同一域下,所以可以相互通信,代理文件一般写一个没有内容的空html就好,demo.html部分代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var flag = false,
iframe = document.createElement('iframe'),//创建iframe
loadIframe = function() {
if (flag) {
var data = iframe.contentWindow.name; // 读取window.name值
alert(data); //我是B域demo2页面的window.name值
} else if (!flag) {
flag = true;
iframe.contentWindow.location = "http://A.com/proxy.html"; // 设置的代理文件指向A域的proxy.html文件
}
};
iframe.src = 'http://B.com/demo2.html';
if (iframe.attachEvent) { //针对低版本IE
iframe.attachEvent('onload', loadIframe);
} else {
iframe.onload = loadIframe; //高级浏览器
}
document.body.appendChild(iframe);

获取完数据我们还可以remove掉这个iframe。

总结

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