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. 分享一个电子发票信息提取工具(Python)

    电子发票太多,想统计下总额异常困难,网上工具不好用,花了2个小时实现一份,测试过中石油.京东开具的电子发票还行,部分发票名称失败有问题不影响统计,有需要的小伙伴自己拿去改吧. import cmd i ...

  2. springboot项目:登录 登录aop拦截 使用Redis与cookie 进行设置获取清除操作

    登录.登出: 第一步:在pom文件中引入依赖 <dependency> <groupId>org.springframework.boot</groupId> &l ...

  3. WebDriver中的Actions对象

    我们可以利用Actions对象来模拟鼠标的操作以及页面的拖拽 1.模拟鼠标的双击操作: 1)模拟双击一个div,验证点击之前的字体为14号 2)点击后字体为20号 Actions builder = ...

  4. Chapter 7. Packages

    Chapter 7. Packages The hierarchical naming structure for packages is intended to be convenient for ...

  5. C#的可空类型与不可空类型

    null:为空,表示产量没有指向任何对象, 如:string = null; int a = null;//是错的 但可以这样,在类型后面加一个问号. int? a = null;//这就是正确的,是 ...

  6. ASP.NET Core 中的依赖注入

    目录 什么是依赖注入 ASP .NET Core 中使用依赖注入 注册 使用 释放 替换为其它的 Ioc 容器 参考 什么是依赖注入 软件设计原则中有一个依赖倒置原则(DIP),为了更好的解耦,讲究要 ...

  7. 用尾递归和普通递归实现n!算法,二者比较

    尾递归 - Tail Recursion尾递归是针对传统的递归算法而言的, 传统的递归算法在很多时候被视为洪水猛兽. 它的名声狼籍, 好像永远和低效联系在一起.尾递归就是从最后开始计算, 每递归一次就 ...

  8. 使用Redis SETNX 命令实现分布式锁(转载)

    使用Redis的 SETNX 命令可以实现分布式锁,下文介绍其实现方法. SETNX命令简介 命令格式 SETNX key value 将 key 的值设为 value,当且仅当 key 不存在. 若 ...

  9. webstorm软件小技巧

    1.使用tab可以方便的生成代码片段 调出setting,搜索live template 在javascrpt 模板线面点击"+" 添加一个模板 fun 模板内容如下 functi ...

  10. [转]Repeat Page Header on each Page for reports SSRS

    本文转自:https://stackoverflow.com/questions/3475144/i-want-to-repeat-page-header-on-each-page-for-repor ...