onpageshow 事件
onpageshow 事件
实例
当用户导航到网页时执行 JavaScript：
<body onpageshow="myFunction()">
完整实例：
<!DOCTYPE html>
<html>
<body onpageshow="myFunction()">
<h1>Hello World!</h1>
<p><b>注释：</b>Internet Explorer 10 及更早版本不支持 onpageshow 事件。</p>
<script>
function myFunction() {
alert("Welcome!");
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
页面下方有更多 TIY 实例。
定义和用法
onpageshow 事件在用户导航到网页时发生。
onpageshow 事件与 onload 事件类似，不同之处在于它发生在页面首次加载时的 onload 事件之后。此外，每次加载页面时都会发生 onpageshow 事件，而从缓存加载页面时不会发生 onload 事件。
如需确定页面是直接从服务器加载还是缓存，您可以使用 PageTransitionEvent 对象的 persisted 属性。如果页面被浏览器缓存，则此属性返回 true，否则返回 false（请参阅下面的更多实例）。
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onpageshow | 支持 | 11.0 | 支持 | 5.0 | 支持 |
语法
在 HTML 中：
<element onpageshow="myScript">
完整实例：
<!DOCTYPE html>
<html>
<body onpageshow="myFunction()">
<p>本例演示如何将 "onpageshow" 事件分配给 body 元素。</p>
<p><b>注释：</b>Internet Explorer 10 及更早版本不支持 onpageshow 事件。</p>
<h1 id="demo"></h1>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Welcome To My Homepage!";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在 JavaScript 中：
object.onpageshow = function(){myScript};
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>本例使用 HTML DOM 将 "onpageshow" 事件分配给 body 元素。</p>
<p><b>注释：</b>Internet Explorer 10 及更早版本不支持 onpageshow 事件。</p>
<h1 id="demo"></h1>
<script>
document.getElementsByTagName("BODY")[0].onpageshow = function() {myFunction()};
function myFunction() {
document.getElementById("demo").innerHTML = "Welcome To My Homepage!";
};
/* This is equivalent to assigning the event to the window object:
window.onpageshow = function() {
document.getElementById("demo").innerHTML = "Welcome To My Homepage!";
};
*/
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在 JavaScript 中，使用 addEventListener() 方法：
object.addEventListener("pageshow", myScript);
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>本例使用 addEventListener() 方法将 "pageshow" 事件附加到 window 对象。</p>
<p><b>注释：</b>Internet Explorer 10 及更早版本不支持 pageshow 事件。</p>
<h1 id="demo"></h1>
<script>
window.addEventListener("pageshow", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Welcome To My Homepage!";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
注释：Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。
技术细节
| 冒泡： | 不支持 |
|---|---|
| 可取消： | 不支持 |
| 事件类型： | PageTransitionEvent |
| 支持的 HTML 标签： | <body> |
| DOM 版本： | Level 3 Events |
更多实例
查看页面是否被浏览器缓存：
function myFunction(event) {
alert(event.persisted);
}
完整实例：
<!DOCTYPE html>
<html>
<body onpageshow="myFunction(event)">
<h1>Hello World!</h1>
<p><b>注释：</b>Internet Explorer 10 及更早版本不支持 onpageshow 事件。</p>
<script>
function myFunction(event) {
if (event.persisted) {
alert("The page was cached by the browser");
} else {
alert("The page was NOT cached by the browser");
}
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
