[关闭]
@Chiang 2020-06-07T16:46:09.000000Z 字数 5793 阅读 481

window 对象

JavaScript 2020-06

概述

浏览器里面，window对象（注意，w为小写）指当前的浏览器窗口。它也是当前页面的顶层对象，即最高一层的对象，所有其他对象都是它的下属。一个变量如果未声明，那么默认就是顶层对象的属性。

  1. a = 1;
  2. window.a // 1

上面代码中，a是一个没有声明就直接赋值的变量，它自动成为顶层对象的属性。

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

Window 对象的属性

window.name

window.name属性是一个字符串，表示当前浏览器窗口的名字。窗口不一定需要名字，这个属性主要配合超链接和表单的target属性使用。

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

该属性只能保存字符串，如果写入的值不是字符串，会自动转成字符串。各个浏览器对这个值的储存容量有所不同，但是一般来说，可以高达几MB。

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

window.closed, window.opener

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

  1. window.closed // false

上面代码检查当前窗口是否关闭。这种检查意义不大，因为只要能运行代码，当前窗口肯定没有关闭。这个属性一般用来检查，使用脚本打开的新窗口是否关闭。

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

window.opener属性表示打开当前窗口的父窗口。如果当前窗口没有父窗口（即直接在地址栏输入打开），则返回null。

  1. window.open().opener === window // true

上面表达式会打开一个新窗口，然后返回true。

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

  1. var newWin = window.open('example.html', 'newWindow', 'height=400,width=400');
  2. newWin.opener = null;

上面代码中，子窗口的opener属性设为null，两个窗口之间就没办法再联系了。

通过opener属性，可以获得父窗口的全局属性和方法，但只限于两个窗口同源的情况，且其中一个窗口由另一个打开。
<a>元素添加rel="noopener"属性，可以防止新打开的窗口获取父窗口，减轻被恶意网站修改父窗口 URL 的风险。

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

window.self, window.window

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

  1. window.self === window // true
  2. window.window === window // true

window.frames, window.length

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

如果iframe元素设置了id或name属性，那么就可以用属性值，引用这个iframe窗口。比如<iframe name="myIFrame">可以用frames['myIFrame']或者frames.myIFrame来引用。

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

  1. frames === window // true

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

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

  1. window.frames.length === window.length // true

上面代码表示，window.frames.length与window.length应该是相等的。

window.frameElement

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

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

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

window.top, window.parent

window.top属性指向最顶层窗口，主要用于在框架窗口（frame）里面获取顶层窗口。

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

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

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

window.status

window.status属性用于读写浏览器状态栏的文本。但是，现在很多浏览器都不允许改写状态栏文本，所以使用这个方法不一定有效。

window.devicePixelRatio

window.devicePixelRatio属性返回一个数值，表示一个 CSS 像素的大小与一个物理像素的大小之间的比率。也就是说，它表示一个 CSS 像素由多少个物理像素组成。它可以用于判断用户的显示环境，如果这个比率较大，就表示用户正在使用高清屏幕，因此可以显示较大像素的图片。

位置大小属性

以下属性返回window对象的位置信息和大小信息。

  • window.screenX，window.screenY

window.screenX和window.screenY属性，返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离（单位像素）。这两个属性只读。

  • window.innerHeight，window.innerWidth

window.innerHeight和window.innerWidth属性，返回网页在当前窗口中可见部分的高度和宽度，即“视口”（viewport）的大小（单位像素）。这两个属性只读。

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

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

  • window.outerHeight，window.outerWidth

window.outerHeight和window.outerWidth属性返回浏览器窗口的高度和宽度，包括浏览器菜单和边框（单位像素）。这两个属性只读。

  • window.scrollX，window.scrollY

window.scrollX属性返回页面的水平滚动距离，window.scrollY属性返回页面的垂直滚动距离，单位都为像素。这两个属性只读。

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

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

  1. if (window.scrollY < 75) {
  2.   window.scroll(0, 75);
  3. }

上面代码中，如果页面向下滚动的距离小于75像素，那么页面向下滚动75像素。

  • window.pageXOffset，window.pageYOffset

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

组件属性

组件属性返回浏览器的组件对象。这样的属性有下面几个。

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

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

  1. window.locationbar.visible
  2. window.menubar.visible
  3. window.scrollbars.visible
  4. window.toolbar.visible
  5. window.statusbar.visible
  6. window.personalbar.visible

全局对象属性

全局对象属性指向一些浏览器原生的全局对象。

  • window.document：指向document对象.注意，这个属性有同源限制。只有来自同源的脚本才能读取这个属性。
  • window.location：指向Location对象，用于获取当前窗口的 URL 信息。它等同于document.location属性。
  • window.navigator：指向Navigator对象，用于获取环境信息。
  • window.history：指向History对象，表示浏览器的浏览历史.
  • window.localStorage：指向本地储存的 localStorage 数据
  • window.sessionStorage：指向本地储存的 sessionStorage 数据
  • window.console：指向console对象，用于操作控制台
  • window.screen：指向Screen对象，表示屏幕信息

window.isSecureContext

window.isSecureContext属性返回一个布尔值，表示当前窗口是否处在加密环境。如果是 HTTPS 协议，就是true，否则就是false。

Window 对象的方法

window.alert(), window.prompt(), window.confirm()

window.open(), window.close(), window.stop()

window.moveTo(), window.moveBy()

window.resizeTo(), window.resizeBy()

window.scrollTo(), window.scroll(), window.scrollBy()

window.print()

window.focus(), window.blur()

window.getSelection()

window.getComputedStyle(), window.matchMedia()

window.requestAnimationFrame()

window.requestIdleCallback()

事件

load事件和onload属性

error事件和onerror属性

window对象的事件监听属性

多窗口操作

窗口的引用

iframe元素

window.frames属性

参考链接:
https://wangdoc.com/javascript/bom/window.html

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注