pageshow与pagehide

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

本文部分内容来自《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事件前
iteye_2245
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
pageshow 和 pagehide
yihanzhi的博客
03-06 9448
一、load、unload和pagehide、pageshow的主要应用 load 和 unload 事件监听web页面的进入和离开，一般用于页面的首次加载、刷新和关闭等操作的监听； pageshow 和 pagehide 事件多用于监听浏览器的前进和后退等。 二、pageshow和load事件的区别 1、pageshow和load区别： pageshow 事件类似于 load 事件，load 事...
HTML5事件-pageshow 和 pagehide
weixin_30660027的博客
04-26 226
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 1044
Firefox 和 Opera 开发了一个名为往返缓存(bfcache，back-forward cache)的功能，此功能旨在使用 浏览器“前进”和“后退”按钮时加快页面之间的切换。这个缓存不仅存储页面数据，也存储 DOM 和 JavaScript 状态，实际上是把整个页面都保存在内存里。如果页面在缓存中，那么导航到这个页面时就 不会触发 load 事件。通常，这不会导致什么问题，因为整个页面状态都被保存起来了。不过，Firefx 决定提供一些事件，把往返缓存的行为暴露出来。
移动端中pagehide、pageshow的应用
aguwky6611的博客
09-05 473
　　闲话少叙，来进入场景：订单提交页面，各种积分礼品卡规则都算好了，用户提交表单开始支付，支付完成进入成功提示页面，这是绝大部分网站的付款体验吧，那么问题来了，web移动端中进入成功提示页后，用户点击浏览器自带的回退按钮会发生什么那？ 　　 　　结果会回到刚刚的订单提交页面（不然那），这就不合理了，这个订单已经被提交了，已经成历史了，怎么能回到提交页面那？只能在历史记录里查询，这里...
javascript基础从小白到高手系列一百六十：pageshow 与pagehide 事件
wanmeijuhao的博客
03-26 427
注意，虽然这个事件的目标是document，但事件处理程序必须添加到window 上。与pageshow 事件一样，pagehide 事件同样是在document 上触发，但事件处理程序必须被。除了常用的属性，pageshow 的event 对象中还包含一个名为persisted 的属性。与pageshow 对应的事件是pagehide，这个事件会在页面从浏览器中卸载后，在unload 事件之。这样，当pagehide 事件触发时，也许可以根据persisted 属性的值来采取一些不同的操作。
ios微信浏览器返回不刷新问题完美解决方法
08-29
在上面的代码中，我们首先检测当前系统是否为 iOS，然后使用 pageshow 和 pagehide 事件来检测页面的显示和隐藏状态。当页面隐藏时，我们将 isPageHide 变量设置为 true。当页面显示时，我们检查 isPageHide 变量，...
jQuery-mobile事件监听与用法详解
11-26
本文将深入探讨 jQuery Mobile 中的事件监听与用法，帮助开发者更好地理解和运用这些事件。 ### 一、初始化事件 1. **`ready`** 事件：这个事件在文档完全加载和解析完成后触发，确保所有DOM元素已经可用。 ```...
jquery与jquerymobile知识大全
11-28
- `pageshow` 和 `pagehide`：页面显示和隐藏事件。 这些事件使得开发者能够轻松地为移动应用添加响应式行为。 #### 七、jQuery Mobile 在实际项目中的应用 1. **移动网站开发**：利用 jQuery Mobile 快速构建...
page-visibility:页面可见性API包装器和Polyfill
05-11
page-visibility.js 包装器这个小包装器隐藏了供应商前缀，并为浏览器中的可见性API提供了有用的高级API...本机支持iOS Safari 7.x-本机支持无法正常工作，并充斥着pageshow / pagehide事件iOS Safari 8.0+-本机支持And
微信小程序页面缩放式侧滑效果的实现代码
12-29
先给大家展示下效果图，大家感觉不错，请参考实现代码： ...<view class='page {{isFix?pageShow:pageHide}}'> <view class='h-toggle iconfont icon-list' bindtap='pageBtn'></view> <view cla
页面显示(pageshow)和页面隐藏(pagehide)事件
热门推荐
12-10 1万+
Firefox和Opera有一个新特性，名叫“往返缓存”（back-forward cache，或bfcache），可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存中不仅保存着页面数据，还保存了DOM和JavaScript的状态；实际上是将整个页面都保存在了内存里。如果页面位于bfcache中，那么再次打开该页面就不会触发load事件。尽管由于内存中保存了整个页面的状态，
移动端兼容性问题(建议码住，持续更新哦～)
草莓不爱吃白菜的博客
10-24 3793
最近开发移动端较多，整理了一下最近遇到的一些兼容问题 1.1px在移动端的解决方案 最开始当然从移动端的兼容性适配开始了，关于的详细解释，在我上一篇博客中已经大概讲了一下，1px在移动端的解决方案，问题产生的原因就是在于不同dpr的设备上，1px的css样式像素会产生不同的效果。 对于老项目，最好的解决方案可以使用css3中的transform结合伪类::af.........
微信 history.back 时候的 缓存问题处理， 最近搞得我很头疼
palmer_kai的博客
11-05 2452
最近在写微信的项目， 遇到一个很坑爹的问题， 为了更好的用户体验，我希望在项目中 点击返回按键的时候能返回到 某一个指定的页面 返回某些页面的时候页面不缓存 jsp 页面缓存 src 请求缓存 ajax 请求缓存 主要操作的 api 有： popstate,pushstate , history.back() pageshow, pagehide 经过测试， 在 pc 端（模拟器）...
jQueryMobile的(十九) 页面显示/隐藏事件(pagebeforeshow、pagebeforehide、pageshow、pagehide)
无名的专栏
11-04 3973
页面显示/隐藏事件(pagebeforeshow、pagebeforehide、pageshow、pagehide) 在jQuery Mobile里，无论一个page在什么时候处于显示或者隐藏状态，这两个事件都会在这个page触发.事件的触发依赖于该page是否正在显示或者隐藏，所以，当一个page过渡发生，会有4个事件被触发:每个page触发2个： pagebefores
JS高级程序设计——第13章事件 13.4 事件类型（HTML5 事件）
YuTong_的博客
04-22 537
HTML5 事件一、contextmenu 事件二、beforeunload事件 DOM 规范没有涵盖所有浏览器支持的所有事件。很多浏览器出于不同的目的——满足用户需求或 解决特殊问题，还实现了一些自定义的事件。HTML5 详尽列出了浏览器应该支持的所有事件。本节只讨论其中得到浏览器完善支持的事件，但并非全部事件。(其他事件会在本书其他章节讨论。) 一、contextmenu 事件 cont...
前端性能优化原理篇——Page Lifecycle
foolbird
04-23 939
前端性能优化原理篇——Page Lifecycle 文章目录前端性能优化原理篇——Page Lifecycle导读生命周期概述好奇解决的问题生命周期状态与事件状态事件跨浏览器兼容建议与实践对每个状态下的建议避免使用老旧的生命周期API数据采集上报启发与实践FAQs参考 导读 原文链接 性能，一直都是前端孜孜不倦探讨的话题。说到生命周期想必大家都不陌生，这都是 React 、Vue 等框架设计的核心理念，它大致都提供了数据初始化、DOM 加载、资源释放等时机钩子供大家合理使用，例如 React shouldC
vue使用window.addEventListener( pageshow )
最新发布
07-20
Vue.js中，`window.addEventListener('pageshow', function() { ... })` 这段代码的作用是在浏览器窗口显示（如从后台恢复或者首次加载）时触发一个事件处理器。`pageshow` 是一个特定的浏览器事件，它在页面从隐藏...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值