浏览器根对象window之值为字符串的属性
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之值为字符串的属性的更多相关文章
- 浏览器根对象window之值为数值的属性
		
1. number属性 1.1 length length 属性返回在当前窗口中frames的数量(包括IFRAMES). 该属性值与window.frames.length属性值相等. 1.2 in ...
 - 浏览器根对象window之history
		
1. history(H5) Window.history保存用户在一个会话期间的网站访问记录,用户每次访问一个新的URL即创建一个新的历史记录. 1.1 length 返回浏览器历史列表中的 URL ...
 - 浏览器根对象window之操作方法
		
1.1 不常用 alert:带有一条指定消息和一个OK按钮的警告框. confirm:带有指定消息和OK及取消按钮的对话框. prompt:可提示用户进行输入的对话框. print:打印网页. ope ...
 - 浏览器根对象window之Location
		
1. Location Location 对象包含有关当前 URL 的信息.Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问. 1.1 Loc ...
 - 浏览器根对象window之screen
		
1. screen 1.1 availHeight/Width screen.availWidth返回浏览器窗口可占用的水平宽度(单位:像素). screen.availHeight返回浏览器窗口在屏 ...
 - 浏览器根对象window之事件
		
1. [事件]动画 onanimationstart onanimationend onanimationiteration onwebkitanimationend onwebkitanimatio ...
 - 浏览器根对象window之caches
		
在控制台输入window. caches可输出一个叫做CacheStorage的对象,它用来存储 Response 对象的.也就是说用来对 HTTP ,响应做缓存的.虽然 localStorage 也 ...
 - 浏览器根对象window之performance
		
W3C性能小组引入的新的API,目前IE9以上的浏览器都支持. 为了解决当前性能测试的困难,W3C推出了一套性能API标准,各种浏览器对这套标准的支持如今也逐渐成熟起来.这套API的目的是简化开发者对 ...
 - 浏览器根对象window之窗体和工具条
		
1. 窗体和工具条 1.1 窗体 frames.self.window.parent.top.opener. frames 数组类型,页面中iframe的引用,如果页面有2个iframe,则frame ...
 
随机推荐
- C#-WebForm-GridView表格展示数据
			
GrideView 控件,功能是将数据库的数据用表格的形式展示在页面上 一.<源>代码中放入 GridView 控件 打开<设计>界面 二.绑定数据源 (一)创建 LinQ 类 ...
 - 蓝牙4.0BLE抓包(一) - 搭建EN-Dongle工作环境 使用EN-Dongle抓包 nRF51822
			
版权声明:本文为博主原创文章,转载请注明作者和出处. 蓝牙4.0 BLE的开发过程中,使用抓包器进行抓包分析无疑会极大地提高我们的开发效率,同时能帮我们快速的定位问题.对于初学者 ...
 - github访问慢加速访问
			
实测从1kb到了1m多 方法: 登录 https://www.ipaddress.com/ 输入github.com得到一个或两个IP地址 输入github.global.ssl.fastly.net ...
 - 利用CompletableFuture优化程序的执行效率
			
一.线程池的Future模式 在了解java8的CompletableFuture之前,先通过Future来解决一个问题,看个例子: 假设现在有一个网站,首页有顶部Banner位.左边栏.右边栏.用户 ...
 - 题解 p2017  [USACO09DEC]晕牛Dizzy Cows
			
前言:P大终于又更新了 正文 转送门 由于当时我这个ZZ不知怎么了,这份题解排版可能有些尴尬,建议大家读完题后,看我主程序前的代码的注释,然后看最下面的图片,然后看第一张图片,对不起,望多谅解 以样例 ...
 - springcloud(四)-Eureka Server集群
			
Eureka Server的高可用 这一节我们接着上一节说. 有分布式应用开发经验的朋友应该发现,前文编写的单节点Eureka Server并不适合线上生产环境.Eureka Client会定时连接E ...
 - Java PrepareStatement
			
1.PreparedStatement是预编译的,对于批量处理可以大大提高效率. 也叫JDBC存储过程2.使用 Statement 对象.在对数据库只执行一次性存取的时侯,用 Statement 对象 ...
 - gcc对open(2)支持重载吗
			
在Linux中,如果man -s2 open, 我们看到两种不同的函数原型声明: $ man -s2 open NAME open, creat - open and possibly create ...
 - JetBrains 产品激活码
			
激活码 K03CHKJCFT-eyJsaWNlbnNlSWQiOiJLMDNDSEtKQ0ZUIiwibGljZW5zZWVOYW1lIjoibnNzIDEwMDEiLCJhc3NpZ25lZU5hb ...
 - [转]OData – the best way to REST–实例讲解ASP.NET WebAPI OData (V4) Service & Client
			
本文转自:http://www.cnblogs.com/bluedoctor/p/4384659.html 一.概念介绍 1.1,什么是OData? 还是看OData官网的简单说明: An open ...