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. C#-WebForm-光棒效果

    <script type="text/javascript"> //获取Repeater的每一行 var oItems = document.getElementsBy ...

  2. [Alpha]Scrum Meeting#10

    github 本次会议项目由PM召开,时间为4月13日晚上10点30分 时长25分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写每日例会报告撰写并整理任务分配博客 撰写每日例会报告配合测试.验收 ...

  3. 修改VS项目的目标平台(目标框架)

    如果是正常的情况下.. 右键项目属性里就有修改的地方.. 可是有时候打开属性发现修改的下拉框是禁用的.. 这时候可以右键 "卸载项目" 编辑 .csproj 项目文件 在上方有个& ...

  4. Java 8学习之Lambda表达式

    一.lambda表达式 一个lambda表达式包含三个部分: 一段代码 参数 自由变量的值,这里的自由指的是哪些不是参数并且没有在代码中定义的变量. 示例: public static void re ...

  5. Java网络编程(二)关于Socket的一些个人想法

    1.Socket之间是如何通信的? 1.1 通信是要两两之间进行的所以应该有至少一个客户端(Client)和一个服务器端(Server),一般来说都是多个c端对一个s端---c\s 1.2 在客户端: ...

  6. Django获取Header中的信息

    今天需要从header中获取一些信息,查了一些资料,需要注意一下几点: request.META.get("header key") 用于获取header的信息 注意的是heade ...

  7. Java的访问权限(public并不等于默认)

    一共有四种访问权限,对应四个范围 1.private :只有本类内可以使用,即使是子类也没权使用 2.protect :子类和友好类能够使用,继承中经常用到 3.默认值,(就是什么都没写),只有同包名 ...

  8. java多线程---------java.util.concurrent并发包----------等待多线程完成

    一.等待多线程完成的join的使用.CoundownLantch.CyclicBarrier .

  9. guava快速入门(二)

    Guava工程包含了若干被Google的 Java项目广泛依赖 的核心库,例如:集合 [collections] .缓存 [caching] .原生类型支持 [primitives support] ...

  10. python——高级特性

    切片操作符 Python提供了切片(Slice)操作符,切片操作十分有用,可以通过切片轻松取出某一段数列.比如前10个数: #slice切片操作符 取前10个元素 L=list(range(0,100 ...