js中pageshow和load事件的区别

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

我们一般在三种情况下刷新页面都会触发load事件

1、a标签的超链接

2、F5或者刷新按钮（强制刷新）

3、前进后退按钮

但是在火狐浏览器中，有个特点，有个”往返缓存“，这个缓存中不仅保存着页面数据，还保存了DOM和javascript的状态，实际上是将庚哥页面都保存在了内存里

所以此时后退按钮就不能刷新页面，导致load事件不被执行。

此时我们可以使用pageshow事件来触发，这个事件在页面显示时触发，无论页面是否来自缓存，在重新加载页面中pageshow会在load事件触发后触发，根据事件对象中e.persisted [返回值为bool，是缓存中的数据，返回true]来判断是否是缓存中的页面触发的pageshow事件，注意这个时间给window添加。

爱唯主机
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
pageshow.jsp
11-29
pageshow.jsp
移动端H5页面返回并且刷新页面（BFcache）
weixin_30877181的博客
11-05 2243
项目中的需求：点击浏览器中的返回按钮，要让页面重新加载资源。因为这部分的资源每次去加载的内容都不一样，如果返回的时候，还是看到原先的内容，那做这个内容块的意义就很小了；而如果用户看完了这部分内容，再返回来的时候，这个地方换成了新的内容，这样就能体现这部分的价值了。 而对于浏览器来说，大部分浏览器的返回是直接使用缓存的，不会执行任何的javascript代码。原因：部分浏览器在后退时不会触发onl...
JavaScript-225：像素比和pagehow事件
臧小川的博客
03-10 390
像素比和pagehow事件
javascript基础从小白到高手系列一百六十：pageshow 与pagehide 事件
最新发布
wanmeijuhao的博客
03-26 296
注意，虽然这个事件的目标是document，但事件处理程序必须添加到window 上。与pageshow 事件一样，pagehide 事件同样是在document 上触发，但事件处理程序必须被。除了常用的属性，pageshow 的event 对象中还包含一个名为persisted 的属性。与pageshow 对应的事件是pagehide，这个事件会在页面从浏览器中卸载后，在unload 事件之。这样，当pagehide 事件触发时，也许可以根据persisted 属性的值来采取一些不同的操作。
如何使用history返回时强制刷新页面
nick_zhang的博客
09-17 1234
//e.persisted判断是否后退进入,从缓存冲获取时为true否则为false window.addEventListener('pageshow', () => { if (e.persisted || (window.performance && window.performance.navigation.type == 2)) { location.reload() } }, false) ...
js如何监听页面的展示与隐藏(visibilitychange) 以及苹果部分机型 safari浏览器无法监听到(visibilitychange)的处理办(pageshow)。
Xpy 的博客
12-23 5405
一、场景：当标签页面隐藏、然后展示的时候触发事件 涉及到两个网页的跳转 而产生的问题 二、安卓和ios需要分别来处理兼容问题 安卓 中可以直接使用 visibilitychange 来判断标签页展示、还是隐藏 document.addEventListener("visibilitychange", () => { if(document.hidden) {} // 页面被挂起 else { // 页面呼出 // 增加路由判断 仅当前页面生效 // if(window.l
JavaScript 学习 Day6_p287-p334
TeacherChao的博客
06-14 171
自学JavaScript第六天笔记
js load 和 pageshow的区别
weixin_42448623的博客
05-31 867
load 触发 a标签的超链接 f5或者刷新按钮 前进后退按钮 但是在 火狐中，有个特点，有个往返缓存，这个缓存不仅保存者页面数据，还保存了DOM和javaScript的状态；实际将整个页面保存到内存里面 所以此时后退按钮不能刷新页面 pageshow触发 在页面显示时候触发，无论页面是否来着缓存。 在重新加载页面中，pageshow 会在load事件触发后触发； 根据事件对象中的 persisted 来判断是非由缓存中的页面触发的pageshow事件； 事件在window对象上面 window.add
javascript基础学习系列二百七十九：pageshow 与 pagehide 事件
wanmeijuhao的博客
01-27 932
Firefox 和 Opera 开发了一个名为往返缓存(bfcache，back-forward cache)的功能，此功能旨在使用 浏览器“前进”和“后退”按钮时加快页面之间的切换。这个缓存不仅存储页面数据，也存储 DOM 和 JavaScript 状态，实际上是把整个页面都保存在内存里。如果页面在缓存中，那么导航到这个页面时就 不会触发 load 事件。通常，这不会导致什么问题，因为整个页面状态都被保存起来了。不过，Firefx 决定提供一些事件，把往返缓存的行为暴露出来。
js中的一些不常用到的事件
weixin_43801564的博客
01-04 509
介绍了一些平常开发中不常用到的事件 1、页面卸载事件beforeunload，unload 2、session事件pageshow，pagehide 3、clipboard事件copy，paste，cut 1 页面卸载事件 1.1 beforeunload beforeunload事件主要用来监听页面卸载，在用户刷新页面或者离开页面（跳转或者直接关闭）时，执行相应的逻辑。（可以阻止卸载操作） ...
when:在事件触发之前或之后订阅事件
05-07
什么时候-在事件触发之前或之后订阅事件 特征 没有依赖 小于500 B缩小+压缩 全类型（TypeScript） CDN构建（UMD） -jsDelivr ， unpkg 安装 $ npm install @chocolatey/when 概要 import when from '@chocolatey...
page-visibility:页面可见性API包装器和Polyfill
05-11
page-visibility.js 包装器这个小包装器隐藏了供应商前缀，并为浏览器中的可见性API提供了有用的高级API。 几乎所有浏览器都原生Page Visibility API。 对于旧的浏览器，使用焦点/模糊技巧（请注意，当浏览器失去...
在vue项目中利用popstate处理页面返回的操作介绍
11-20
一个标题（现在被忽略了），以及一个可选的URL地址）， 注意：IOS版的微信，是会立即触发popstate事件，所以需要pageshow做下处理，（当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退...
rem-responsive-layout:用于移动设备的“rem”响应式布局的代码片段，计算屏幕宽度并使用字体大小进行响应
06-05
只需将这些代码片段插入到head标签中。 <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> [removed] ;(function() { var timer, on = 'addEventListener', d = document, w = window, doc ...
js数据什么时候是null什么时候是undefined
爱唯主机
09-17 2069
常见的返回undefined类型的 变量声明且没有赋值 获取对象中不存在的属性 函数需要实参，但是调用时没有传值，形参是undefined 函数调用没有返回值或者return后没有数据，接受函数返回值的变量 返回null 对象不存在就是null ...
HTML基础
爱唯主机
12-25 435
超文本标记语言HTML（Hyper Text Markup Language） 超文本： 不仅可以加入文字的文本文件，还可以加入链接、图片、声音、动画、影视等内容 标记语言：是在纯文本文件里面包含了HTML指令代码。这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言。 如何创建HTML文件 文档的命名规则 不允许使用特殊字符 可以以中文命名，但是不推荐使用中文。 HTML文件名推荐使用小写。girl.html 注意：如果创建完HTML文件后依然是文本文件格式，那么需要将系
vue3 window.addEventListener('pageshow')
07-11
在 Vue 3 中，你可以使用 `onMounted` 钩子函数结合 `window.addEventListener` 来监听 `pageshow` 事件。`pageshow` 事件在页面重新显示时触发，例如在页面从缓存中恢复或者重新加载时。 下面是一个示例代码： ```javascript import { onMounted } from 'vue'; export default { setup() { onMounted(() => { window.addEventListener('pageshow', handlePageShow); }); const handlePageShow = (event) => { // 页面重新显示时执行的操作 console.log('页面重新显示了！'); }; return { handlePageShow, }; }, }; ``` 在上面的示例中，当组件被挂载到 DOM 后，`onMounted` 钩子函数会被调用，并添加一个 `pageshow` 事件监听器，指定 `handlePageShow` 函数作为事件处理函数。当页面重新显示时，`handlePageShow` 函数会被调用，并输出 "页面重新显示了！" 的日志。 请注意，需要在组件的 `setup` 函数中定义 `handlePageShow` 函数，并通过 `return` 将其暴露出来，以便在模板中使用或者进行其他操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值