• 31【window 对象】

    window 对象

    1.概述

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

    a = 1;
window.a // 1

    • 1
    • 2

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

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

    2.window 对象的属性

    2.1 window.name

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

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

    • 1
    • 2
    • 3

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

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

    2.2 位置大小属性

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

    （1）window.screenX，window.screenY

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

    （2） window.innerHeight，window.innerWidth

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

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

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

    （3）window.outerHeight，window.outerWidth

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

    （4）window.scrollX，window.scrollY

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

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

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

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

    • 1
    • 2
    • 3

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

    （5）window.pageXOffset，window.pageYOffset

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

    3.window 对象的方法

    3.1 window.alert()，window.prompt()，window.confirm()

    window.alert()、window.prompt()、window.confirm()都是浏览器与用户互动的全局方法。它们会弹出不同的对话框，要求用户做出回应。注意，这三个方法弹出的对话框，都是浏览器统一规定的式样，无法定制。

    （1）window.alert()

    window.alert()方法弹出的对话框，只有一个“确定”按钮，往往用来通知用户某些信息。

    window.alert('Hello World');

    • 1

    用户只有点击“确定”按钮，对话框才会消失。对话框弹出期间，浏览器窗口处于冻结状态，如果不点“确定”按钮，用户什么也干不了。

    window.alert()方法的参数只能是字符串，没法使用 CSS 样式，但是可以用\n指定换行。

    alert('本条提示\n分成两行');

    • 1

    （2）window.prompt()

    window.prompt()方法弹出的对话框，提示文字的下方，还有一个输入框，要求用户输入信息，并有“确定”和“取消”两个按钮。它往往用来获取用户输入的数据。

    var result = prompt('您的年龄？', 25)

    • 1

    上面代码会跳出一个对话框，文字提示为“您的年龄？”，要求用户在对话框中输入自己的年龄（默认显示25）。用户填入的值，会作为返回值存入变量result。

    window.prompt()的返回值有两种情况，可能是字符串（有可能是空字符串），也有可能是null。具体分成三种情况。

    1. 用户输入信息，并点击“确定”，则用户输入的信息就是返回值。
    2. 用户没有输入信息，直接点击“确定”，则输入框的默认值就是返回值。
    3. 用户点击了“取消”（或者按了 ESC 按钮），则返回值是null。

    window.prompt()方法的第二个参数是可选的，但是最好总是提供第二个参数，作为输入框的默认值。

    （3）window.confirm()

    window.confirm()方法弹出的对话框，除了提示信息之外，只有“确定”和“取消”两个按钮，往往用来征询用户是否同意。

    var result = confirm('你最近好吗？');

    • 1

    上面代码弹出一个对话框，上面只有一行文字“你最近好吗？”，用户选择点击“确定”或“取消”。

    confirm方法返回一个布尔值，如果用户点击“确定”，返回true；如果用户点击“取消”，则返回false。

    var okay = confirm('Please confirm this message.');
if (okay) {
  // 用户按下“确定”
} else {
  // 用户按下“取消”
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    confirm的一个用途是，用户离开当前页面时，弹出一个对话框，问用户是否真的要离开。

    window.onunload = function () {
  return window.confirm('你确定要离开当面页面吗？');
}

    • 1
    • 2
    • 3

    这三个方法都具有堵塞效应，一旦弹出对话框，整个页面就是暂停执行，等待用户做出反应。

    3.2 window.scrollTo()，window.scroll()，window.scrollBy()

    window.scrollTo方法用于将文档滚动到指定位置。它接受两个参数，表示滚动后位于窗口左上角的页面坐标。

    window.scrollTo(x-coord, y-coord)

    • 1

    它也可以接受一个配置对象作为参数。

    window.scrollTo(options)

    • 1

    配置对象options有三个属性。

    • top：滚动后页面左上角的垂直坐标，即 y 坐标。
    • left：滚动后页面左上角的水平坐标，即 x 坐标。
    • behavior：字符串，表示滚动的方式，有三个可能值（smooth、instant、auto），默认值为auto。
    window.scrollTo({
  top: 1000,
  behavior: 'smooth'
});

    • 1
    • 2
    • 3
    • 4

    window.scroll()方法是window.scrollTo()方法的别名。

    window.scrollBy()方法用于将网页滚动指定距离（单位像素）。它接受两个参数：水平向右滚动的像素，垂直向下滚动的像素。

    window.scrollBy(0, window.innerHeight)

    • 1

    上面代码用于将网页向下滚动一屏。

    如果不是要滚动整个文档，而是要滚动某个元素，可以使用下面三个属性和方法。

    • Element.scrollTop
    • Element.scrollLeft
    • Element.scrollIntoView()

    4.事件

    window对象可以接收以下事件。

    4.2 load 事件和 onload 属性

    load事件发生在文档在浏览器窗口加载完毕时。window.onload属性可以指定这个事件的回调函数。

    window.onload = function() {
  var elements = document.getElementsByClassName('example');
  for (var i = 0; i < elements.length; i++) {
    var elt = elements[i];
    // ...
  }
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    上面代码在网页加载完毕后，获取指定元素并进行处理。

    4.2 error 事件和 onerror 属性

    浏览器脚本发生错误时，会触发window对象的error事件。我们可以通过window.onerror属性对该事件指定回调函数。

    window.onerror = function (message, filename, lineno, colno, error) {
  console.log("出错了！--> %s", error.stack);
};

    • 1
    • 2
    • 3

    由于历史原因，window的error事件的回调函数不接受错误对象作为参数，而是一共可以接受五个参数，它们的含义依次如下。

    • 出错信息
    • 出错脚本的网址
    • 行号
    • 列号
    • 错误对象

    老式浏览器只支持前三个参数。

    并不是所有的错误，都会触发 JavaScript 的error事件（即让 JavaScript 报错）。一般来说，只有 JavaScript 脚本的错误，才会触发这个事件，而像资源文件不存在之类的错误，都不会触发。

    下面是一个例子，如果整个页面未捕获错误超过3个，就显示警告。

    window.onerror = function(msg, url, line) {
  if (onerror.num++ > onerror.max) {
    alert('ERROR: ' + msg + '\n' + url + ':' + line);
    return true;
  }
}
onerror.max = 3;
onerror.num = 0;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    需要注意的是，如果脚本网址与网页网址不在同一个域（比如使用了 CDN），浏览器根本不会提供详细的出错信息，只会提示出错，错误类型是“Script error.”，行号为0，其他信息都没有。这是浏览器防止向外部脚本泄漏信息。一个解决方法是在脚本所在的服务器，设置Access-Control-Allow-Origin的 HTTP 头信息。

    Access-Control-Allow-Origin: *

    • 1

    然后，在网页的