onpageshow 事件

事件对象参考手册 事件对象

在用户浏览网页时触发 JavaScript:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
</head>
<body onpageshow="myFunction()">

  <h1>Hello World!</h1>
  <script>
    function myFunction() {
      alert("Welcome!");
    }
  </script>

</body>
</html>

尝试一下 »

本文底部包含了更多实例。

定义和用法

onpageshow 事件在用户浏览网页时触发。

onpageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。

为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false (查看以下 "更多实例" )。

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

事件
onpageshow Yes 11.0 Yes 5.0 Yes

语法

HTML 中：

<element onpageshow="myScript">
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
</head>
<body onpageshow="myFunction()">

  <p>该实例演示了如何向 body 元素添加 "onpageshow" 事件。</p>
  <h1 id="demo"></h1>
  <script>
    function myFunction() {
      document.getElementById("demo").innerHTML = "欢迎来到我的主页!";
    }
  </script>

</body>
</html>

尝试一下 »

JavaScript 中：

object.onpageshow = function() {
  myScript
};
<p>该实例演示了如何使用 HTML DOM 向 body 元素添加 "onpageshow" 事件。</p>
<h1 id="demo"></h1>
<script>
  document.getElementsByTagName("BODY")[0].onpageshow = function() {
    myFunction()
  };

  function myFunction() {
    document.getElementById("demo").innerHTML = "欢迎来到我的主页!";
  };
  /* 这个与在 window 对象中添加事件相同:
  window.onpageshow = function() {
      document.getElementById("demo").innerHTML = "欢迎来到我的主页!";
  };
  */
</script>

尝试一下 »

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("pageshow", myScript);
<p>该实例演示了如何使用 addEventListener() 方法向 window 对象添加 "onpageshow" 事件。</p>
<h1 id="demo"></h1>
<script>
  window.addEventListener("pageshow", myFunction);

  function myFunction() {
    document.getElementById("demo").innerHTML = "欢迎来到我的主页!";
  }
</script>

尝试一下 »

注意： Internet Explorer8 及更早 IE 版本的浏览器不支持 addEventListener() 方法。

技术细节
是否支持冒泡: No
是否可以取消: No
事件类型: PageTransitionEvent
支持的 HTML 标签: <body>

更多实例

查看页面是否从浏览器缓存中读取：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
</head>
<body onpageshow="myFunction(event)">

  <h1>Hello World!</h1>
  <script>
    function myFunction(event) {
      alert("页面是否从浏览器缓存中加载? " + event.persisted);
    }
  </script>

</body>
</html>

尝试一下 »

事件对象参考手册 事件对象