浏览器根对象window之值为字符串的属性

最新推荐文章于 2021-06-10 19:55:41 发布

weixin_34212189

最新推荐文章于 2021-06-10 19:55:41 发布

阅读量80

点赞数

原文链接：http://www.cnblogs.com/ndos/p/8228941.html

版权

1. string属性

1.1 origin

window.origin使用返回的是当前网页的网址。打开百度首页，并在控制台中输入

window.origin

控制台中会输出"https://www.baidu.com"，并不包含查询字符串，比如浏览器地址栏输入https://www.baidu.com/?nDos=great。打开百度首页之后，使用window.origin也不会输出其中的?nDos=great。

1.2 name

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

该名称是在 window.open() 方法创建窗口时指定的或者使用一个 <frame> 标记的 name 属性指定的。窗口的名称可以用作一个 <a> 或者 <form> 标记的 target 属性的值。以这种方式使用 target 属性声明了超链接文档或表单提交结果应该显示于指定的窗口或框架中。

对于内联iframe，如一个页面里面有很多iframe，就可以用：window.name（当前window的名称）、window.parent.name（父window的名称）、widnow.top.name（顶层window的名称）。

1.3 name跨域

window的name属性有一个特征：即在一个窗口的生命周期内，窗口载入的所有的页面都是共享一个window.name的，每一个页面对window.name都有读写的权限，window.name是持久的存在于一个窗口载入的所有页面中的，并不会因为新的页面的载入而被重置。

请看下面两个html文件组成的例子：

a.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a.html</title>
</head>
<body>
<script>
    window.name = '这是a.html设置的window.name值';
    /*2秒后在本页面打开b.html*/
    setTimeout(function(){
        window.location = 'b.html';
    }, 2000);
</script>
</body>
</html>

b.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>b.html</title>
</head>
<body>
<script>
    document.write(window.name);
</script>
</body>
</html>

在浏览器中打开a.html，2秒之后会跳转到b.html，并在页面中写入“这是a.html设置的window.name值”。我们可以看到b.html页面上成功输出了a.html页面中设置的window.name的值，如果在之后所有载入的页面都没对window.name进行修改的话，那么所有的这些页面获取到的window.name的值都是a.html页面中设置的那个值；

不过要注意的是：window.name的值只能是字符串的形式，这个字符串的大小最大只能允许2M左右，具体取决于不同的浏览器，但是一般是够用了。

上面的例子中，我们用到的页面a.html和b.html是处于同一个域的，但是即使a.html与b.html处于不同的域中，上述结论同样是适用的，这也正是利用window.name进行跨域的原理；

比如上面的例子，我们把window.location = 'b.html'中的跳转页面改为www.baidu.com，然后打开控制台输出window.name看看是什么数据。

当然这种跳转的方式来跨域显然不能实际应用，比如我们的页面是http://localhost/a.html，而想要获取的数据在目标页面http://www.cnblogs.com/ndos/data.html中。这个时候我们需要一个中间角色iframe，通过它来获得data.html中的数据。具体方法如下。

以下为修改后的a.html文件代码：

<body>
<iframe id="proxy" src="http://www.cnblogs.com/data.html" style="display: none;" onload = "getData()"> 
<script>
    function getData(){
        var iframe = document.getElementById('proxy);
        iframe.onload = function(){
            var data = iframe.contentWindow.name;
            //上述即为获取iframe里的window.name也就是data.html页面中所设置的数据；
        };
        iframe.src = 'b.html';
    }
</script>
</body>

上述代码首先设置了一个iframe标签，将src设置为跨域网页的地址，加载成功后将执行绑定在onload事件上的代码，也就是getData()。该函数中在iframe上重置了onload事件绑定的函数，其中代码可以获取iframe中window对象的name属性值，最后最关键的一步是将iframe的src属性值设置为b.html，也就是与a.html同源的页面地址。

如果没有这最后最关键的一步，那么将获取不到iframe.contentWindow.name的值。这收到浏览器的同源策略所限制，但是最后一步使得iframe中的页面与a.html是同源的，同时iframe中的页面跳转也没有改变window.name的值，最终我们获得的还是http://www.cnblogs.com/data.html中的值。

1.4 status

相关联的还有defaultStatus和defaultstatus属性，个人还不知道这几个属性有什么用，在试验中也发现不起作用。比如谷歌不显示状态栏（仅在鼠标移动到a标签上才显示）；IE中也不起作用，应该是IE设置的原因，具体没有深入配置。

有兴趣的读者可自行调试。

转载于:https://www.cnblogs.com/ndos/p/8228941.html

weixin_34212189

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器根对象window之值为字符串的属性

1. string属性1.1 originwindow.origin使用返回的是当前网页的网址。打开百度首页，并在控制台中输入window.origin控制台中会输出"https://www.baidu.com"，并不包含查询字符串，比如浏览器地址栏输入https://www.baidu.com/?nDos=great。打开百度首页之后，使用window.origin也不会输出...
复制链接

扫一扫