灏天阁

网页内容的装卸事件

· Yin灏

网页在被加载、卸载、隐藏、跳转、滚动时，均会发生装卸（load or unload）相关的事件。

出现错误事件

若代表图像 （image）的 img 元素实例，或内含 Javascript 源代码的 script 元素实例，出现加载或执行上的问题时，则会发生出现错误（error）事件。

let element = document.createElement('img');

element.src = 'http://www.xxx.cn/one_image.png';
element.style.display = 'block';
element.style.marginTop = '1em';
document.body.appendChild(element);

function display_message01(event) {
  console.log('The file is not found...');
}

function display_message02(event) {
  console.log('An exception is thrown...');
}

function expired() {
  throw new Error('Time is out...');
}

element.onerror = display_message01;
window.onerror = display_message02;

setTimeout(expired, 2000);

加载和页面显示事件

// document.body.onload = () => console.log('This is page has been loaded');

window.onload = () => console.log('This is page has been loaded');

// document.body.onpageshow = () => console.log('This page shows up after being loaded');
window.onpageshow = () => console.log('This page shows up after being loaded');

/*
  This is page has been loaded
  This page shows up after being loaded
*/

function display() {
  console.log('An image is loaded.');
}

let element = document.createElement('img');
element.src = './img/pic01.png';
element.style.display = 'block';
element.style.marginTop = '10px';

document.body.appendChild(element);

element.onload = display;

/*
  An image is loaded.
  This is page has been loaded
  This page shows up after being loaded
*/

执行顺序：网页内的图像文档被加载完成 -> 网页本身被加载完成 -> 网页本身被完整显示于窗口中

卸载和页面隐藏事件

当前页面点击跳转，会发生页面卸载和页面隐藏事件。

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <a href="https://www.baidu.com/">百度</a>
  <script>
    function display01(event) {
      console.log('This page is hidden');
    }
    function display02(event) {
      console.log('This page is unload');
    }
    window.onpagehide = display01;
    window.onunload = display02;
  </script>
</body>

</html>

执行顺序：网页被隐藏完成 -> 网页被卸载完成

先于卸载事件

网页即将被卸载之前，会发生先于卸载的事件 。

let element = document.createElement('a');

element.href = 'http://www.tup.tsinghua.edu.cn';

element.innerHTML = 'Click here to another page.';

element.style.display = 'block';

element.style.marginTop = '1em';

document.body.appendChild(element);

function goodbae(event) {
  return 1; // 这里必须定义 return 1; 类似的语句
}

// document.body.onbeforeunload = goodbae;
window.onbeforeunload = goodbae;

网址散列变化事件

在浏览器地址中，特定网址在符号 # 右侧的锚点名称，被变更时，会发生网址散列变化事件。

console.log(location.href); // file:///C:/Users/IP/Desktop/test/index.html#name
console.log(location.hash); // #name

function change_hash () {
  // location.href += '#anchor01';
  location.hash = '#anchor01';
}

function display_message () {
  console.log('Hash part in URL is changed');
}

setTimeout(change_hash, 2000);

// document.body.onhashchange = display_message;
window.onhashchange = display_message;

滚动事件

function action01 () {
  console.log('The page is scrolling');
}
window.onscroll = action01;

- Book Lists -