JavaScript window 对象详解(1)

简介: JavaScript window 对象详解(1)

1. 概述

window对象 指当前的浏览器窗口,它也是当前页面的顶层对象,即最高一层的对象,所有其他对象都是它的下属。

一个变量如果未声明,那么默认就是顶层对象的属性。

// a是一个没有声明就直接赋值的变量,它自动成为顶层对象的属性。
a = 1;
console.log(window.a) // 1

window 有自己的实体含义,其实不适合当作最高一层的顶层对象,这是一个语言的设计失误。

最早,设计这门语言的时候,原始设想是语言内置的对象越少越好,这样可以提高浏览器的性能。因此,语言设计者 Brendan Eich 就把 window 对象当作顶层对象,所有未声明就赋值的变量都自动变成 window 对象的属性。这种设计使得编译阶段无法检测出未声明变量,但到了今天已经没有办法纠正了。

2. window 对象的属性

2.1 window.name

window.name属性是一个字符串,表示当前浏览器窗口的名字。

窗口不一定需要名字,这个属性主要配合超链接和表单的target属性使用。

window.name = 'Hello World!';
console.log(window.name) // "Hello World!"

该属性只能保存字符串,如果写入的值不是字符串,会自动转成字符串。

只要浏览器窗口不关闭,这个属性是不会消失的。

举例来说,访问a.com时,该页面的脚本设置了window.name,接下来在同一个窗口里面载入了b.com,新页面的脚本可以读到上一个网页设置的 window.name。页面刷新也是这种情况。一旦浏览器窗口关闭后,该属性保存的值就会消失,因为这时窗口已经不存在了。

2.2 window.closed,window.opener

2.2.1 window.closed 属性返回一个布尔值,表示窗口是否关闭;

window.closed // false

上面代码检查当前窗口是否关闭。这种检查意义不大,因为只要能运行代码,当前窗口肯定没有关闭。

这个属性一般用来检查,使用脚本打开的新窗口是否关闭。

var popup = window.open();
if ((popup !== null) && !popup.closed) {
  // 窗口仍然打开着
}

2.2.2 window.opener 属性表示打开当前窗口的父窗口;

如果当前窗口没有父窗口(即直接在地址栏输入打开),则返回null。

// 表达式会打开一个新窗口,然后返回 true
window.open().opener === window // true

如果两个窗口之间不需要通信,建议将子窗口的 opener 属性显式设为 null,这样可以减少一些安全隐患。

// 子窗口的 opener 属性设为 null,两个窗口之间就没办法再联系了
var newWin = window.open('example.html', 'newWindow', 'height=400,width=400');
newWin.opener = null;

通过 opener 属性,可以获得父窗口的全局属性和方法,但只限于两个窗口同源的情况,且其中一个窗口由另一个打开。

< a > 元素添加 rel=“noopener” 属性,可以防止新打开的窗口获取父窗口,减轻被恶意网站修改父窗口 URL 的风险。

<a href="https://an.evil.site" target="_blank" rel="noopener"> 恶意网站 </a>

2.3 window.self,window.window

window.self和window.window属性都指向窗口本身,这两个属性只读

console.log(window.self === window) // true
console.log(window.window === window) // true

2.4 window.frames,window.length

window.frames 属性返回一个类似数组的对象,成员为页面内所有框架窗口,包括 frame 元素和 iframe 元素。

window.frames[0]表示页面中第一个框架窗口。


如果 iframe 元素设置了 id 或 name 属性,那么就可以用属性值,引用这个 iframe 窗口。

< iframe name=“myIFrame”> 可以用 frames[‘myIFrame’] 或者 frames.myIFrame 来引用。


frames属性实际上是window对象的别名。

frames === window // true

因此,frames[0] 也可以用 window[0] 表示。

从语义上看 frames 更清晰,而且考虑到 window 还是全局对象,因此推荐表示多窗口时,总是使用 frames[0] 的写法。

window.length属性返回当前网页包含的框架总数。如果当前网页不包含 frame 和 iframe 元素,那么 window.length 就返回 0。

// window.frames.length 与 window.length 应该是相等的
window.frames.length === window.length // true

2.5 window.frameElement

window.frameElement 属性主要用于当前窗口嵌在另一个网页的情况(嵌入< object >、< iframe >或< embed >元素),返回当前窗口所在的那个元素节点。如果当前窗口是顶层窗口,或者所嵌入的那个网页不是同源的,该属性返回null。

// HTML 代码如下
// <iframe src="about.html"></iframe>
// 下面的脚本在 about.html 里面
var frameEl = window.frameElement;
if (frameEl) {
  frameEl.src = 'other.html';
}

上面代码中,frameEl变量就是 < iframe > 元素。

2.6 window.top,window.parent

window.top 属性指向最顶层窗口,主要用于在框架窗口(frame)里面获取顶层窗口;

window.parent 属性指向父窗口。如果当前窗口没有父窗口,window.parent指向自身;

对于不包含框架的网页,这两个属性等同于window对象

if (window.parent !== window.top) {
  // 表明当前窗口嵌入不止一层
}

2.7 window.status

window.status属性用于读写浏览器状态栏的文本。

注意: 现在很多浏览器都不允许改写状态栏文本,所以使用这个方法不一定有效。

2.8 window.devicePixelRatio

window.devicePixelRatio属性返回一个数值,表示一个 CSS 像素的大小与一个物理像素的大小之间的比率。

它表示一个 CSS 像素由多少个物理像素组成。它可以用于判断用户的显示环境,如果这个比率较大,就表示用户正在使用高清屏幕,因此可以显示较大像素的图片。

3. 位置大小属性

3.1 window.screenX,window.screenY(只读)

window.screenX和window.screenY属性,返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离(单位像素)。

3.2 window.innerHeight,window.innerWidth(只读)

window.innerHeight和window.innerWidth属性,返回网页在当前窗口中可见部分的高度和宽度,即“视口”(viewport)的大小(单位像素)。

用户放大网页的时候(比如将网页从100%的大小放大为200%),这两个属性会变小。因为这时网页的像素大小不变(比如宽度还是960像素),只是每个像素占据的屏幕空间变大了,因为可见部分(视口)就变小了。

注意,这两个属性值包括滚动条的高度和宽度。

3.3 window.outerHeight,window.outerWidth(只读)

window.outerHeight 和 window.outerWidth 属性返回浏览器窗口的高度和宽度,包括浏览器菜单和边框(单位像素)。

3.4 window.scrollX,window.scrollY(只读)

window.scrollX属性返回页面的水平滚动距离,window.scrollY属性返回页面的垂直滚动距离,单位都为像素。

注意: 这两个属性的返回值不是整数,而是双精度浮点数。如果页面没有滚动,它们的值就是0。

举例来说,如果用户向下拉动了垂直滚动条75像素,那么window.scrollY就是75左右。用户水平向右拉动水平滚动条200像素,window.scrollX就是200左右。

// 如果页面向下滚动的距离小于75像素,那么页面向下滚动75像素
if (window.scrollY < 75) {
  window.scroll(0, 75);
}

3.5 window.pageXOffset,window.pageYOffset

window.pageXOffset属性和window.pageYOffset属性,是window.scrollX和window.scrollY别名。

4. 组件属性

组件属性返回浏览器的组件对象。

window.locationbar // 地址栏对象
window.menubar  // 菜单栏对象
window.scrollbars // 窗口的滚动条对象
window.toolbar // 工具栏对象
window.statusbar // 状态栏对象
window.personalbar // 用户安装的个人工具栏对象

这些对象的 visible 属性是一个布尔值,表示这些组件是否可见。这些属性只读。

window.locationbar.visible
window.menubar.visible
window.scrollbars.visible
window.toolbar.visible
window.statusbar.visible
window.personalbar.visible





相关文章
|
20天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
23 3
|
23天前
|
JavaScript 前端开发 开发者
JavaScript的`Math`对象
【4月更文挑战第21天】JavaScript的`Math`对象
18 3
|
3天前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
【5月更文挑战第11天】JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
10 2
|
3天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
6 2
|
7天前
|
存储 JavaScript 前端开发
JavaScript对象方法详解
JavaScript对象方法详解
15 1
|
7天前
|
JavaScript
js多维数组去重并使具有相同属性的对象数量相加
js多维数组去重并使具有相同属性的对象数量相加
10 1
|
14天前
|
前端开发 JavaScript 数据安全/隐私保护
前端javascript的DOM对象操作技巧,全场景解析(二)
前端javascript的DOM对象操作技巧,全场景解析(二)
|
14天前
|
移动开发 缓存 JavaScript
前端javascript的DOM对象操作技巧,全场景解析(一)
前端javascript的DOM对象操作技巧,全场景解析(一)
|
14天前
|
缓存 编解码 自然语言处理
前端javascript的BOM对象知识精讲
前端javascript的BOM对象知识精讲
|
14天前
|
JavaScript 前端开发
JavaScript 日期对象
JavaScript 日期对象