Load和Pageshow事件

最新推荐文章于 2024-03-26 08:48:07 发布
最新推荐文章于 2024-03-26 08:48:07 发布
阅读量1.2k 收藏
点赞数
分类专栏： JS基础 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_69317131/article/details/124570023
版权

下面三种情况都会刷新页面都会触发load事件

1a标签的超链接
2F5或者刷新按钮
3前进后退按钮

但是火狐中有个特点‘往返缓存’，这个缓存中不仅保存着页面数据，还保存了DOM和Javascript的状态，实际上是将整个页面都保存在了内存里。 所以此时后退按钮不能刷新页面

这时需要使用pageshow事件触发，这个事件在页面显示时触发，无论页面是否来自缓存，再重新加载页面中，pageshow会在load事件触发后触发；根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件，注意这个事件给window添加

不是你的波
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
立即执行函数 / pageshow事件
weixin_50119334的博客
10-06 1178
立即执行函数 立即执行函数：不许要调用，立马能够自己执行的函数 写法： 第一种: (function(){ })() 第二种: (function(){ }() ) //第一种，较为常用 //(function () {})() (function () { console.log(2); //不需要调用，立马打印2 第二个函数可以看作是调用函数 })(); (function (a,b) { console.l
pageshow.jsp
11-29
pageshow.jsp
pageshow事件
前端之行，任重道远！
02-19 672
pageshow重新加载页面触发的事件 load文档内容全部加载完毕触发的事件，详情见博客：bom-window对象的常见事件1（窗口事件，定时器）
load和pageshow的区别
maplecsd的博客
07-22 335
load和pageshow事件的区别 下面三种情况会刷新页面都会触发load事件： 点击a标签 F5刷新或点击属性按钮（强制刷新） 前进后退按钮 但是，在火狐浏览器中，有一个“往返缓存”，这个缓存中不仅保存着页面数据，还保存了DOM和Js的状态，也就是将整个页面都保存在内存中，此时后退是不能刷新页面。 pageshow就可以解决这个问题，pageshow是在页面显示时触发，无论页面是否来自缓存。在重新加载的页面中，pageshow会在load事件触发后触发。根据事件对象的persisted可以来判断是否
javascript基础学习系列二百七十九：pageshow 与 pagehide 事件
wanmeijuhao的博客
01-27 1051
Firefox 和 Opera 开发了一个名为往返缓存(bfcache，back-forward cache)的功能，此功能旨在使用 浏览器“前进”和“后退”按钮时加快页面之间的切换。这个缓存不仅存储页面数据，也存储 DOM 和 JavaScript 状态，实际上是把整个页面都保存在内存里。如果页面在缓存中，那么导航到这个页面时就 不会触发 load 事件。通常，这不会导致什么问题，因为整个页面状态都被保存起来了。不过，Firefx 决定提供一些事件，把往返缓存的行为暴露出来。
jQueryMobile的(十九) 页面显示/隐藏事件(pagebeforeshow、pagebeforehide、pageshow、pagehide)
无名的专栏
11-04 3967
页面显示/隐藏事件(pagebeforeshow、pagebeforehide、pageshow、pagehide) 在jQuery Mobile里，无论一个page在什么时候处于显示或者隐藏状态，这两个事件都会在这个page触发.事件的触发依赖于该page是否正在显示或者隐藏，所以，当一个page过渡发生，会有4个事件被触发:每个page触发2个： pagebefores
jQuery Mobile事件参考手册.zip_jQuery Mobile事件参考手册
09-21
jQuery Mobile的事件可以分为两类：页面生命周期事件和用户交互事件。页面生命周期事件主要与页面加载、初始化、显示和隐藏等过程相关，而用户交互事件则涉及用户与页面元素的互动。 1. 页面生命周期事件： - `...
jQuery-mobile事件监听与用法详解
11-26
jQuery Mobile 是一个专门为移动设备设计的 JavaScript 库，它提供了丰富的 UI 组件和优化的触控事件处理。本文将深入探讨 jQuery Mobile 中的事件监听与用法，帮助开发者更好地理解和运用这些事件。 ### 一、初始...
jqueryMobile事件
05-19
jQuery Mobile 的核心特性之一是它提供了一系列专为移动环境设计的事件，这些事件可以帮助开发者更方便地处理用户的交互和页面生命周期的变化。以下是对这些事件的详细说明： 1. **hashchange**：当浏览器的哈希值...
JqueryMobile 开发文档速查
06-05
总结来说，jQuery Mobile 是一个功能强大的移动开发框架，其`data-`属性、图标系统和丰富的事件集为开发者提供了便利的工具，能够快速构建具有良好用户体验的移动应用。通过理解和熟练运用这些知识点，可以大大提高...
javascript基础从小白到高手系列一百六十：pageshow 与pagehide 事件
最新发布
wanmeijuhao的博客
03-26 407
注意，虽然这个事件的目标是document，但事件处理程序必须添加到window 上。与pageshow 事件一样，pagehide 事件同样是在document 上触发，但事件处理程序必须被。除了常用的属性，pageshow 的event 对象中还包含一个名为persisted 的属性。与pageshow 对应的事件是pagehide，这个事件会在页面从浏览器中卸载后，在unload 事件之。这样，当pagehide 事件触发时，也许可以根据persisted 属性的值来采取一些不同的操作。
pageshow 和 pagehide
yihanzhi的博客
03-06 9374
一、load、unload和pagehide、pageshow的主要应用 load 和 unload 事件监听web页面的进入和离开，一般用于页面的首次加载、刷新和关闭等操作的监听； pageshow 和 pagehide 事件多用于监听浏览器的前进和后退等。 二、pageshow和load事件的区别 1、pageshow和load区别： pageshow 事件类似于 load 事件，load 事...
关于jQuery Mobile 的pageinit,pageshow,以及data-ajax
axjs82499的博客
07-23 104
这只是流水帐。。。 在连续两次ajax切换page时，比如从首页ajax到列表页再ajax到详情页时,再back到首页，循环往复，第三次进入列表页时，页面出现了重复切换的问题。 与页面使用的动画效果无关，与back的设置无关。 目前为止只有连续使用两次ajax才会出现此问题。 -------------------------------------------------...
ff1.5增加pageshow/pagehide事件
hax的技术部落格
03-16 2148
FF 1.5开始采用了和Opera类似的高速缓存机制，http://developer.mozilla.org/en/docs/Using_Firefox_1.5_caching。多数情况下，页面被完整的cache起来（例外情况如https、cache-control以及带有unload的页面）直到浏览器关闭。这使得在bf(back/forward)时响应飞快。但是有一个情况，就是在bf的时候，不
移动端点击返回键 页面不刷新
徐同保的专栏
06-19 3410
在浏览器中点击返回或者前进按钮时，页面不刷新的问题。这个问题存在于移动端居多，尤其是苹果手机。这种问题经常在微信、uc这类的浏览器出现，这是因为浏览器保存了DOM和js的状态，相当于保存了整个页面，这种特性称作 “往返缓存”（back-forward cache，或bfcache）。对于这种情况可以用“pageshow”事件来解决，“pageshow”事件表示浏览器展示文档的时候触发，并且是在“o...
onpageshow 事件及应用
weixin_49295874的博客
03-15 1297
onpageshow 事件在用户浏览网页时触发。 onpageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。和onshow生命周期类似。 html中添加onpageshow事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html中
PC端网页特效二
m0_45659764的博客
05-05 814
2. 元素可视区client系列 client翻译过来都是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息，通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等 client系列属性 作用 element.clientTop 返回元素上边框的大小 element.clientLeft 返回元素左边框的大小 element.clientWidth 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位 ele
页面显示(pageshow)和页面隐藏(pagehide)事件
热门推荐
12-10 1万+
Firefox和Opera有一个新特性，名叫“往返缓存”（back-forward cache，或bfcache），可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存中不仅保存着页面数据，还保存了DOM和JavaScript的状态；实际上是将整个页面都保存在了内存里。如果页面位于bfcache中，那么再次打开该页面就不会触发load事件。尽管由于内存中保存了整个页面的状态，
vue3 window.addEventListener('pageshow')
07-11
在 Vue 3 中，你可以使用 `onMounted` 钩子函数结合 `window.addEventListener` 来监听 `pageshow` 事件。`pageshow` 事件在页面重新显示时触发，例如在页面从缓存中恢复或者重新加载时。 下面是一个示例代码： ``...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值