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设置的原因,具体没有深入配置。

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

浏览器根对象window之值为字符串的属性的更多相关文章

  1. 浏览器根对象window之值为数值的属性

    1. number属性 1.1 length length 属性返回在当前窗口中frames的数量(包括IFRAMES). 该属性值与window.frames.length属性值相等. 1.2 in ...

  2. 浏览器根对象window之history

    1. history(H5) Window.history保存用户在一个会话期间的网站访问记录,用户每次访问一个新的URL即创建一个新的历史记录. 1.1 length 返回浏览器历史列表中的 URL ...

  3. 浏览器根对象window之操作方法

    1.1 不常用 alert:带有一条指定消息和一个OK按钮的警告框. confirm:带有指定消息和OK及取消按钮的对话框. prompt:可提示用户进行输入的对话框. print:打印网页. ope ...

  4. 浏览器根对象window之Location

    1. Location Location 对象包含有关当前 URL 的信息.Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问. 1.1 Loc ...

  5. 浏览器根对象window之screen

    1. screen 1.1 availHeight/Width screen.availWidth返回浏览器窗口可占用的水平宽度(单位:像素). screen.availHeight返回浏览器窗口在屏 ...

  6. 浏览器根对象window之事件

    1. [事件]动画 onanimationstart onanimationend onanimationiteration onwebkitanimationend onwebkitanimatio ...

  7. 浏览器根对象window之caches

    在控制台输入window. caches可输出一个叫做CacheStorage的对象,它用来存储 Response 对象的.也就是说用来对 HTTP ,响应做缓存的.虽然 localStorage 也 ...

  8. 浏览器根对象window之performance

    W3C性能小组引入的新的API,目前IE9以上的浏览器都支持. 为了解决当前性能测试的困难,W3C推出了一套性能API标准,各种浏览器对这套标准的支持如今也逐渐成熟起来.这套API的目的是简化开发者对 ...

  9. 浏览器根对象window之窗体和工具条

    1. 窗体和工具条 1.1 窗体 frames.self.window.parent.top.opener. frames 数组类型,页面中iframe的引用,如果页面有2个iframe,则frame ...

随机推荐

  1. 架构师养成记--23.sigar使用实例

    作用是检测机器的硬件环境 注意在jdk的bin目录下加上sigar的lib目录中的文件 import java.net.InetAddress; import java.net.UnknownHost ...

  2. C#-MVC-强数据类型、TempData、多表单、ajax

    一.强数据类型 将某一个或一组数据在控制器传递到视图上去 一个视图里只能有一个强类型数据 强类型数据 - 将某一个或一组数据在控制器传递到视图上去,同ViewBag,数据更稳定,防止多数据传递中出现错 ...

  3. 将python的代码文件打包成可执行文件

    1.使用pip install Pyinstaller  命令安装 2.使用命令 pyinstaller -F  *.py打包成exe 3.在\dist文件夹下找到exe; 一.pyinstaller ...

  4. Java NIO学习与记录(二):FileChannel与Buffer用法与说明

    FileChannel与Buffer用法与说明 上一篇简单介绍了NIO,这一篇将介绍FileChannel结合Buffer的用法,主要介绍Buffer FileChannel的简单使用&Buf ...

  5. golang (5) http 请求分析

    http 分析包分析 fmt.Println("get Content-Type: ", r.Header.Get("Content-Type")) var r ...

  6. Selenium+Chrome+PhantomJS爬取淘宝美食

    搜索关键字 利用selenium驱动浏览器搜索有关键字,得到查询后的商品列表 分析页码并翻页 得到商品码数,模拟翻页,得到后续页面的商品列表 分析提取商品内容 利用PyQuery分析源码,解析得到商品 ...

  7. Python3 print()函数sep,end,file参数用法练习

    来自builtins.py:def print(self, *args, sep=' ', end='\n', file=None): # known special case of print &q ...

  8. javascript中Function与Object

    1. 先来一段代码: console.log(Function); // function Function() { [native code] } console.log(Object); // f ...

  9. rpm: error while loading shared libraries: libgcc_s.so.1: cannot open shared object file: No such file or directory解决办法

    不多说,直接上干货! 问题详情 [root@bigdatamaster app]# rpm -qa | grep gcc rpm: error : cannot open shared object ...

  10. 【Qt开发】常用控件--QLineEdit

    QLineEdit是单行文本编辑控件.比如用户名,密码等输入框可以使用该控件. 所属头文件<QLineEdit> 常用方法 1.void setText(const QString &am ...