Categories: DOM对象tips

onpageshow 事件 | HTML DOM 事件对象

返回到:DOM 对象:HTML DOM 事件对象

定义和用法

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

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

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

所有主要浏览器都支持 onpageshow 事件

语法

HTML 中:

<element onpageshow="myScript">

JavaScript 中:

object.onpageshow=function(){myScript};

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("pageshow", myScript);

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

技术细节

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

实例

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

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

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

</body>
</html>

terry

这个人很懒,什么都没有留下~

Share
Published by
terry

Recent Posts

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

3 天 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

1 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

2 周 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

2 周 ago

聊聊React和Vue组件更新的实现及区别

React 和 Vue 都是当…

3 周 ago