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. FlowPortal-BPM——验证控件

    自上而下依次是: 非空验证.范围验证.规则表达式验证.比较验证.自定义验证 非空验证的使用: 1.ControlToValidate - 监控的控件 2.ErrorMessage - 为空时提示信息

  2. 能够放在文档的 <head> 中的各种配置元素

    一份关于任何可以写入到你的文档中 <head> 部分的清单 最小推荐 <meta charset="utf-8"> <meta http-equiv= ...

  3. c/c++ int,float,short 大小端转换函数

    unsigned int(uint32_t)大小端转换函数 unsigned int BLEndianUint32(unsigned int value) { return ((value & ...

  4. CentOS 7 主机名bogon解决办法

    转https://blog.csdn.net/qq_24221531/article/details/80334942 一.修改linux主机的配置文件/etc/hostname 和 /etc/hos ...

  5. 当spring抛出异常时出现的页面的@ExceptionHandler(RuntimeException.class) 用法

    当spring抛出异常时出现的页面的@ExceptionHandler(RuntimeException.class) 用法 主要用在Controller层 @ExceptionHandler(Run ...

  6. php工具箱使用

    linux安装过程 1,去网盘下载(本人网盘也有,如果找不到,contact me)http://pan.baidu.com/s/1cxHQge 我解压以后放在/mnt/hgfs/root/phpto ...

  7. Android多媒体之view,SurfaceView,GLSurfaceView

    1.相关概念 不用画布,直接在窗口上进行绘图叫做无缓冲绘图. 用了一个画布,将所有内容都先画到画布上,在整体绘制到窗口上,就该叫做单缓冲绘图, 那个画布就是一个缓冲区.用了两个画布,一个进行临时的绘图 ...

  8. 我爱Markdown (1)

    作为一个程序员,用Word, Excel等写技术文档实在是不那么方便.而我,作为一个Unix/Linux程序员,写技术文档还是喜欢用Wiki等在线写作工具.虽然Wiki已经很酷了,但跟Markdown ...

  9. @Controller 和 @RestController 区别

    @Controller 用于标识为spring MVC的controller @RestController 是一个便利的注解,加了这个注解就相当于加了@Controller 和 @ResponseB ...

  10. Git的常用撤销技巧与解决冲突方法

    git checkout . #本地所有修改的.没有的提交的,都返回到原来的状态 git stash #把所有没有提交的修改暂存到stash里面.可用git stash pop回复. git rese ...