浏览器环境 - window 对象 - 属性介绍

简介: 本文介绍 window 对象为数不多的几个属性值:origin、name、status 设备高宽像素比等。着重介绍 name 属性的由来、用处,尤其是其在跨域当中的作用。

1 origin

window.origin使用返回的是当前网页的网址。打开百度首页,并在控制台中输入

window.origin

控制台中会输出"https://www.baidu.com",并不包含查询字符串,比如浏览器地址栏输入https://www.baidu.com/?nDos=great。打开百度首页之后,使用window.origin也不会输出其中的?nDos=great。

2 name

设置】或【返回】存放窗口的名称。

2.1 如何指定

在 window.open() 方法创建窗口时指定。window.open( pageURL, name, parameters ),其中的 name 参数即是。

使用一个 <frame> 标记的 name 属性指定。<frame name="nDos"></frame>。

2.2 用处

窗口的名称可以用作一个 <a> 或者 <form> 标记的 target 属性的值。以这种方式使用 target 属性声明了超链接文档或表单提交结果应该显示于指定的窗口或框架中。

比如:<a href="......." target="nDos"></a>

对于内联iframe,如一个页面里面有很多iframe,就可以用:window.name(当前window的名称)、window.parent.name(父window的名称)、widnow.top.name(顶层window的名称)。

2.3 跨域

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 中的值。

3 status

相关联的还有 defaultStatus 和 defaultstatus 属性,个人还不知道这几个属性有什么用,在试验中也发现不起作用。比如谷歌不显示状态栏(仅在鼠标移动到 a 标签上才显示);IE中也不起作用,应该是IE设置的原因,具体没有深入配置。

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

4 length

length 属性返回在当前窗口中frames的数量(包括IFRAMES)。

该属性值与window.frames.length属性值相等。

5 innerWidth/Height

窗口中文档显示区域的宽度,该属性可读可写,以像素计。

这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。

IE8之前不支持这些属性。它用 document.documentElement 或 document.body (与 IE 的版本相关)的 clientWidth 和 clientHeight 属性作为替代。

6 outerWidth/Height

表示窗口的宽度包括两边的border及滚动条的值, outerHeight 表示窗口的高度包括菜单,地址栏,工具栏等,属性可读性。

IE8之前的浏览器不支持,且没有提供替代的属性。

7 滚动值

scrollY:firefox、chrome,opera支持,IE不支持,忽略Doctype规则。

pageYOffset:IE9+ 、firefox、chrome,opera均支持该方式获取页面滚动高度值,并且会忽略Doctype定义规则。

延伸记忆:

document.documentElement.scrollTop:如果页面定义了doctype文档头,基本所有的浏览器都支持。除safari貌似不支持,定义html5 doctype,支持body.scrollTop却不支持documentElement.scrollTop。

document.body.scrollTop:如果没定义doctype,所有浏览器都支持,(定义了doctype,chrome 也支持)

8 screenX/Y

表示窗口相对于屏幕左上角的位置。注意IE不支持此属性。只读属性。

screenTop/screenLeft属性值相同。

9 devicePixelRatio

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。公式表示就是:window.devicePixelRatio = 物理像素 / dips。比如电脑时值为1,iPhoneX值为3。

dip或dp,(device independent pixels,设备独立像素)与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。

浏览器一般都会有放大缩小的控件,当你选择不同的缩放比例时,window.devicePixelRatio都会相应的改变。比如将页面放大2倍,那么window.devicePixelRatio=2。

这个值大多用在移动设备上,正常人眼可以识别的分辨率为300PPI,而现在很多设备的分辨率都超过了300PPI。如果设备总是以满分辨率来显示东西就可能造成文字太小,人们看不清。因此像浏览器这样的软件就会对内容做一次放大后再进行渲染,也就是降低分辨率。要降低分辨率就需要让像素这个单位变大,因此PPI的计算不再使用物理像素,而改用设备独立像素。那么设备独立像素和物理像素之间就存在一个比例差异,这就是设备像素比。

10 TEMPORARY

该属性通常与PERSISTENT一起使用。由于此时仅GoogleChrome 浏览器可以实施此FileSystemAPI,目前尚不存在专门用于文件/配额管理的浏览器用户界面,故在此不再深入研究。

目录
相关文章
|
3月前
|
存储 缓存 前端开发
前端谷歌浏览器面版属性
【8月更文挑战第19天】前端谷歌浏览器面版属性
44 0
|
9天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
20天前
|
XML 编解码 JavaScript
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
|
1月前
|
Web App开发 JavaScript 前端开发
JavaScript Window - 浏览器对象模型
JavaScript Window - 浏览器对象模型
21 2
|
2月前
|
JavaScript 前端开发
js之浏览器对象|28
js之浏览器对象|28
|
3月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
105 1
|
3月前
|
JavaScript 前端开发
JavaScript BOM 的概念(浏览器对象模型)
JavaScript BOM 的概念(浏览器对象模型)
47 1
|
4月前
|
机器人 Shell 开发者
`roslibpy`是一个Python库,它允许非ROS(Robot Operating System)环境(如Web浏览器、移动应用等)与ROS环境进行交互。通过使用`roslibpy`,开发者可以编写Python代码来远程控制ROS节点,发布和订阅话题,以及调用服务。
`roslibpy`是一个Python库,它允许非ROS(Robot Operating System)环境(如Web浏览器、移动应用等)与ROS环境进行交互。通过使用`roslibpy`,开发者可以编写Python代码来远程控制ROS节点,发布和订阅话题,以及调用服务。
|
3月前
|
JavaScript UED
js之探索浏览器对象模型
js之探索浏览器对象模型
53 0
|
3月前
|
网络安全 数据安全/隐私保护 iOS开发
【Mac os】如何在服务器上启动Jupyter notebook并在本地浏览器Web端环境编辑程序
本文介绍了如何在服务器上启动Jupyter Notebook并通过SSH隧道在本地浏览器中访问和编辑程序的详细步骤,包括服务器端Jupyter的启动命令、本地终端的SSH隧道建立方法以及在浏览器中访问Jupyter Notebook的流程。
130 0

热门文章

最新文章