事件

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

load 事件和 onload 属性

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

  1. window.onload = function() {
  2.   var elements = document.getElementsByClassName('example');
  3.   for (var i = 0; i < elements.length; i++) {
  4.     var elt = elements[i];
  5.     // ...
  6.   }
  7. };

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

error 事件和 onerror 属性

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

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

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

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

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

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

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

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

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

  1. Access-Control-Allow-Origin: *

然后，在网页的<script>标签中设置crossorigin属性。

  1. <script crossorigin="anonymous" src="//example.com/file.js"></script>

上面代码的crossorigin="anonymous"表示，读取文件不需要身份信息，即不需要 cookie 和 HTTP 认证信息。如果设为crossorigin="use-credentials"，就表示浏览器会上传 cookie 和 HTTP 认证信息，同时还需要服务器端打开 HTTP 头信息Access-Control-Allow-Credentials。

window 对象的事件监听属性

除了具备元素节点都有的 GlobalEventHandlers 接口，window对象还具有以下的事件监听函数属性。

  • window.onafterprint：afterprint事件的监听函数。
  • window.onbeforeprint：beforeprint事件的监听函数。
  • window.onbeforeunload：beforeunload事件的监听函数。
  • window.onhashchange：hashchange事件的监听函数。
  • window.onlanguagechange: languagechange的监听函数。
  • window.onmessage：message事件的监听函数。
  • window.onmessageerror：MessageError事件的监听函数。
  • window.onoffline：offline事件的监听函数。
  • window.ononline：online事件的监听函数。
  • window.onpagehide：pagehide事件的监听函数。
  • window.onpageshow：pageshow事件的监听函数。
  • window.onpopstate：popstate事件的监听函数。
  • window.onstorage：storage事件的监听函数。
  • window.onunhandledrejection：未处理的 Promise 对象的reject事件的监听函数。
  • window.onunload：unload事件的监听函数。