pageshow与pagehide

最新推荐文章于 2024-03-26 08:48:07 发布
原创 最新推荐文章于 2024-03-26 08:48:07 发布 · 300 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bfcache #pageshow #pagehide

本文介绍BFCache（往返缓存）的概念及其在Firefox和Opera浏览器中的应用，通过pageshow与pagehide事件实现页面状态保存与快速恢复，提高用户体验。

本文部分内容来自《Javascript高级程序设计》，个人记录学习用！

 

 

  • bfcache
  1. back-forward cache(往返缓存)
  2. 目前ff和opera支持
  3. 用户在使用浏览器的前进后退时候，可以加速页面转换的速度
  • pageshow
  1. 在页面显示的时候触发
  2. 重新加载页面的时候，在load之后触发
  3. 对于bfcache中的页面，会恢复到原来状态
  4. 事件中的event对象有一个熟悉persisted，如果true表示在bfcache中。

 

  • pagehide
  1. 在卸载页面时候触发
  2. 在unload事件前
web前端数据埋点方案
weixin_50367873的博客
08-25 1055
逻辑图： 监听多页面用户停留时长 let stopTime window.onpageshow = ()=>{ stopTime = new Date().getTime() } window.onpagehide = ()=>{ stopTime = new Date().getTime() - stopTime localStorage.setItem(window.location.href+'stopTime', stopTime) } 监听单页面用户停留时长 // 也可
pageshow 和 pagehide
yihanzhi的博客
03-06 1万+
一、load、unload和pagehide、pageshow的主要应用 load 和 unload 事件监听web页面的进入和离开，一般用于页面的首次加载、刷新和关闭等操作的监听； pageshow 和 pagehide 事件多用于监听浏览器的前进和后退等。 二、pageshow和load事件的区别 1、pageshow和load区别： pageshow 事件类似于 load 事件，load 事...
页面显示(pageshow)和页面隐藏(pagehide)事件
12-10 1万+
Firefox和Opera有一个新特性，名叫“往返缓存”（back-forward cache，或bfcache），可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存中不仅保存着页面数据，还保存了DOM和JavaScript的状态；实际上是将整个页面都保存在了内存里。如果页面位于bfcache中，那么再次打开该页面就不会触发load事件。尽管由于内存中保存了整个页面的状态，
HTML5事件-pageshow 和 pagehide
weixin_30660027的博客
04-26 363
1 <!doctype html> 2 <html> 3 <head> 4 <title>html5事件</title> 5 <meta charset=uft-8> 6 <script"> 7 //省略部分代码 8 </scr...
javascript基础学习系列二百七十九：pageshow 与 pagehide 事件
m0_68635815的博客
03-06 1251
Firefox 和 Opera 开发了一个名为往返缓存(bfcache，back-forward cache)的功能，此功能旨在使用 浏览器“前进”和“后退”按钮时加快页面之间的切换。这个缓存不仅存储页面数据，也存储 DOM 和 JavaScript 状态，实际上是把整个页面都保存在内存里。如果页面在缓存中，那么导航到这个页面时就 不会触发 load 事件。通常，这不会导致什么问题，因为整个页面状态都被保存起来了。不过，Firefx 决定提供一些事件，把往返缓存的行为暴露出来。
移动端中pagehide、pageshow的应用
aguwky6611的博客
09-05 570
　　闲话少叙，来进入场景：订单提交页面，各种积分礼品卡规则都算好了，用户提交表单开始支付，支付完成进入成功提示页面，这是绝大部分网站的付款体验吧，那么问题来了，web移动端中进入成功提示页后，用户点击浏览器自带的回退按钮会发生什么那？ 　　 　　结果会回到刚刚的订单提交页面（不然那），这就不合理了，这个订单已经被提交了，已经成历史了，怎么能回到提交页面那？只能在历史记录里查询，这里...
ios微信浏览器返回不刷新问题完美解决方法
08-29
在上面的代码中，我们首先检测当前系统是否为 iOS，然后使用 pageshow 和 pagehide 事件来检测页面的显示和隐藏状态。当页面隐藏时，我们将 isPageHide 变量设置为 true。当页面显示时，我们检查 isPageHide 变量，...
微信浏览器监听离开事件 pagehide
最新发布
03-31
因此，pagehide和pageshow是更推荐的事件，属于Page Lifecycle API的一部分。 接下来，用户需要具体的实现方法。根据引用中的代码示例，添加事件监听器的方式是使用window.addEventListener('pagehide', callback)...
添加pagehide监听时间后，刷新之后直接退出登录
03-14
例如，在pagehide事件中设置一个标记，然后在pageshow事件中清除该标记。如果在短时间内标记未被清除，则执行登出。不过，这可能需要使用localStorage或sessionStorage来保持状态，因为页面卸载后内存中的变量会丢失...
javascript基础从小白到高手系列一百六十：pageshow 与pagehide 事件
wanmeijuhao的博客
03-26 560
注意，虽然这个事件的目标是document，但事件处理程序必须添加到window 上。与pageshow 事件一样，pagehide 事件同样是在document 上触发，但事件处理程序必须被。除了常用的属性，pageshow 的event 对象中还包含一个名为persisted 的属性。与pageshow 对应的事件是pagehide，这个事件会在页面从浏览器中卸载后，在unload 事件之。这样，当pagehide 事件触发时，也许可以根据persisted 属性的值来采取一些不同的操作。
移动端兼容性问题(建议码住，持续更新哦～)
草莓不爱吃白菜的博客
10-24 4352
最近开发移动端较多，整理了一下最近遇到的一些兼容问题 1.1px在移动端的解决方案 最开始当然从移动端的兼容性适配开始了，关于的详细解释，在我上一篇博客中已经大概讲了一下，1px在移动端的解决方案，问题产生的原因就是在于不同dpr的设备上，1px的css样式像素会产生不同的效果。 对于老项目，最好的解决方案可以使用css3中的transform结合伪类::af.........
微信 history.back 时候的 缓存问题处理， 最近搞得我很头疼
palmer_kai的博客
11-05 2576
最近在写微信的项目， 遇到一个很坑爹的问题， 为了更好的用户体验，我希望在项目中 点击返回按键的时候能返回到 某一个指定的页面 返回某些页面的时候页面不缓存 jsp 页面缓存 src 请求缓存 ajax 请求缓存 主要操作的 api 有： popstate,pushstate , history.back() pageshow, pagehide 经过测试， 在 pc 端（模拟器）...
解决手机上页面返回但是页面js没有刷新的痛点（BFcache）
热门推荐
每天都记录一点点！
04-21 2万+
一些浏览器中返回按钮是直接使用缓存的，不会执行任何js代码，例如, 在提交的时候将按钮设置为loading状态，如果在提交成功后没有对按钮进行处理，那么返回后按钮依然是loading状态，这就很尴尬了。 原因：部分浏览器在后退时不会触发onload事件，這是HTML5世代浏览器新增的特性之一——Back-Forward Cache(简称bfcache) 什么是bfcache 《J
jQueryMobile的(十九) 页面显示/隐藏事件(pagebeforeshow、pagebeforehide、pageshow、pagehide)
无名的专栏
11-04 4078
页面显示/隐藏事件(pagebeforeshow、pagebeforehide、pageshow、pagehide) 在jQuery Mobile里，无论一个page在什么时候处于显示或者隐藏状态，这两个事件都会在这个page触发.事件的触发依赖于该page是否正在显示或者隐藏，所以，当一个page过渡发生，会有4个事件被触发:每个page触发2个： pagebefores
JS高级程序设计——第13章事件 13.4 事件类型（HTML5 事件）
YuTong_的博客
04-22 959
HTML5 事件一、contextmenu 事件二、beforeunload事件 DOM 规范没有涵盖所有浏览器支持的所有事件。很多浏览器出于不同的目的——满足用户需求或 解决特殊问题，还实现了一些自定义的事件。HTML5 详尽列出了浏览器应该支持的所有事件。本节只讨论其中得到浏览器完善支持的事件，但并非全部事件。(其他事件会在本书其他章节讨论。) 一、contextmenu 事件 cont...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值