浏览器缓存与pageshow监听掉坑

最新推荐文章于 2024-07-17 14:39:50 发布

weixin_33827965

最新推荐文章于 2024-07-17 14:39:50 发布

阅读量1.7k

点赞数

文章标签： javascript 移动开发 ViewUI

原文链接：http://www.cnblogs.com/xiaoyuchen/p/11055089.html

版权

h5项目遇到个问题，测试表示退出浏览器后再直接进入页面，页面会出错。

猜测是浏览器缓存的问题，本想监听pageshow进行刷新处理，结果监听不到。

参考以下博文可解决问题。

https://juejin.im/post/5c807802f265da2de33f4e1f

转载于:https://www.cnblogs.com/xiaoyuchen/p/11055089.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33827965

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

解决移动端无法监听页面刷新或关闭（beforeunload无效）问题

weixin_44431295的博客

08-08

9852

解决移动端无法监听页面刷新或关闭（beforeunload无效）问题背景最近公司要更新一下官网，由于时间问题，决定采用vue来开发，由于vue刚刚使用不久，小白一个，期间遇到不少坑，关于页面刷新导致vuex（store）里面的数据消失问题尤为头疼，说一下自己的解决方案。解决思路通过监听页面刷新或者关闭来将vuex里面的数据保存到sessionStorage里，在页面加载时读取session...

vue3 HarmonyOS 华为鸿蒙浏览器的支付宝支付问题解决

郊眠寺

06-20

1693

事情是这样的，现在的vue3+ts项目需要用到支付宝支付，支付的方式都很简单，就是获取form表单然后提交即可，但是在鸿蒙的自带浏览器中出现了诡异的情况，主要表现在机智如我，先是尝试了生命周期的调试，无效，根本没有任何反应，遂放弃！于是我先，如果判断华为浏览器，然后将表单的在新页面打开呢？嘿，结果您猜怎么着？这个属性华为浏览器直接没反应，诶，就是雷打不动…怎么办呢？看来曲线救国是不行了，得来硬的，好在这个方法还能用，思路大概是通过浏览器标识判断是华为浏览器，此时新开一个页面，将请求到的form数据存在（

参与评论您还未登录，请先登录后发表或查看评论

【笔记】pageshow监听，判断当前页面是否为通过返回操作进入

hamal_ye的博客

02-20

2624

在a页面，点击某个入口跳转至b、c、d...等任何一个页面在a页面添加pageshow监听，如果是通过返回按钮回到当前页面，则做一些类似“欢迎回来”的提示框实现效果如下： window.addEventListener("pageshow", function (event) { // console.log("监听pageshow"); if (event.persi...

移动端pageshow

青阳的博客

07-24

702

用于强制刷新当前页面 var isPage = false; window.onload = function () { window.addEventListener('pageshow', function () { if (isPage) { window.location.reload(); } }); window.addEventListener('pagehide', function () { isPage = true; .

前端兼容性问题解决方案

最新发布

快进小树林的博客

07-17

359

如果页面中保存在bfcache中，则这个属性的值为true；3、部分安卓手机或IOS使用history.go(-1)返回上一页，页面不刷新，或者执行某些操作后重新跳转到该页面，预期要响应操作结果，但是页面不刷新。这种问题一般是缓存引起的，临时方案需要用户删除微信浏览缓存或移除小程序解决，长期方案可以在h5页面增加动态时间戳，让浏览器每次都访问新的h5页面。4、移动端使用绝对布局时，如果内容区有滚动条，IOS会出现滚动不流畅的问题。11、IE浏览器下写js时，定义对象时，严格模式下末尾不能有逗号。

【JavaScript 教程】事件——其他常见事件

油墨香^-^的博客

06-08

3934

作者 | 阮一峰 1、资源事件 1.1、beforeunload 事件 beforeunload事件在窗口、文档、各种资源将要卸载前触发。它可以用来防止用户不小心卸载资源。如果该事件对象的returnValue属性是一个非空字符串，那么浏览器就会弹出一个对话框，询问用户是否要卸载该资源。但是，用户指定的字符串可能无法显示，浏览器会展示预定义的字符串。如果用户点击“取消”按钮，资源就不会卸载。 window.addEventListener('beforeunload', function

[js点滴]JavaScript之文档事件08

图解AI

11-13

6130

文档事件beforeunload事件，unload事件，load事件，error事件，pageshow事件，pagehide事件以下事件与网页的加载与卸载相关。（1）beforeunload事件beforeunload事件在窗口将要关闭，或者网页（即document对象）将要卸载时触发。它可以用来防止用户不小心关闭网页。根据标准，只要在该事件的回调函数中，调用了event.preventDefaul

监听浏览器刷新事件,拦截浏览器返回，js监听移动端浏览器页面显示、隐藏

qq_40591925的博客

08-08

1万+

注: onbrforeunload和onunload都会在刷新和关闭页面是触发，但是onbeforeunload在onunload之前执行，并且它还可以阻止onunload的执行。那么在页面刷新时执行顺序就是onbeforeunload、onunload、onload。

bfcache相关

SemineLee的博客

02-13

4096

前言让我们来看一种情况：一个列表页面中，预期每次网页载入后，onload()事件都会以ajax方式重新取得最新的列表资料，因此点击后退到该页面，用户应该能立即看到最新的列表资料。然后，在一些浏览器中，发现回到上页时不会自动载入更新后的资料，需要刷新才能重新载入。这是因为：部分浏览器在后退时不会触发onload事件，這是HTML5世代浏览器新增的特性之一——Back-Forward Cache(简

html5微信拍照后自动刷新,微信内置浏览器物理返回不刷新问题

weixin_35255032的博客

05-30

1095

问题描述与需求非单页面应用；在页面A，通过get方式进入页面B之后再回到页面A，这个时候微信iOS版页面不刷新，安卓版微信刷新页面 ---> 所有物理返回都必须强制刷新重新进入页面；在页面A，通过get方式进入页面B之后再回到页面A，这个时候所有版本的微信在页面A上数据没有更新 ---> 需要更新数据；分析与提出问题问题一. 通过后端同事查看访问日志发现，所有版本上的微信页面返回数据不...

手机 html5 返回页面不刷新,微信自带浏览器物理返回不刷新问题

weixin_33260887的博客

06-03

778

【js】window.addEventListener介绍说明

热门推荐

Q仔的博客

06-29

6万+

原型 public override function addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void 作用　　侦听事件并处理相应的函数。[1] 参数

pageshow事件中修改dom失败

weixin_30716141的博客

09-28

221

在移动端微信中h5页面，点击下方的返回按钮，返回上一页，页面是不会刷新的，load事件和DOMCotentLoaded事件都不会触发，只有pageshow是会触发的。我本意想在pageshow中修改页面某个元素的样式，但是发现总是修改失败，我的代码是这样的： window.addEventListener('pageshow', function() { document.querySe...

移动端苹果和安卓的适配问题_前端基础：必须要知道的移动端适配（6）——移动端适配方案...

weixin_39608479的博客

12-06

732

尽管我们可以使用设备独立像素来保证各个设备在不同手机上显示的效果类似，但这并不能保证它们显示完全一致，我们需要一种方案来让设计稿得到更完美的适配。flexible方案flexible方案是阿里早期开源的一个移动端适配解决方案，引用flexible后，我们在页面上统一使用rem来布局。它的核心代码非常简单：// set 1rem = viewWidth / 10function setRemUnit...

页面显示(pageshow)和页面隐藏(pagehide)事件

12-10

1万+

Firefox和Opera有一个新特性，名叫“往返缓存”（back-forward cache，或bfcache），可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存中不仅保存着页面数据，还保存了DOM和JavaScript的状态；实际上是将整个页面都保存在了内存里。如果页面位于bfcache中，那么再次打开该页面就不会触发load事件。尽管由于内存中保存了整个页面的状态，

IOS微信浏览器返回事件popstate监听

sinat_37138973的博客

01-18

6247

问题：通过监听popstate事件，来判断是否点击返回按钮，比如从A页面跳转到B页面（监听popstate），然后再跳转到C页面，点击返回的按钮，测试成功，包括安卓版，但是问题来了，IOS版的微信，是会立即触发popstate事件，导致直接从C页面跳转到A页面，其他的支付宝（安卓、IOS）、微信（安卓）都是可以，就是微信IOS版不行。经过查找相关资料，选择了一个方法，不过有点弊端，但是并不影响操作，

Android Webview 腾讯TBS X5 浏览器内核接入-解决低版本android手机无法兼容某些H5导致白屏的问题

chq497130800的专栏

10-26

7378

所有的页面跳转，都在一个webView中，各种第三方的跳转，视频播放，分享等等功能！真是叫人头大！尤其是视频播放这块，要整成横向的全屏模式，试了各种方法，总是竖屏！于是想起之前看到的一个博客说是腾讯的游览器内核SDK是免费提供的，到网上一查，它提供的功能确实满足！尤其是在加载视频的时候，会加载它自己的解码器，播放器的界面也蛮好看的！接下来，大家就懂了！先做一个demo试试呗！开始撸代码！官...

onpageshow 监听页面是否是缓存页面

weixin_30487317的博客

06-16

225

　　需求：点击A页面跳转至B页面，在B页面点击手机物理回退键或者history.back回退时，需要在A页面判断当前页面是否是回退回来的页面，而不是新加载的。这里用到一个 onpageshow 事件。定义和用法 onpageshow 事件在用户浏览网页时触发。 onpageshow 事件类似于onload事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每...

原生js清除浏览器缓存

03-31

在原生JavaScript中，可以通过以下几种方式清除浏览器缓存： 1. 使用location.reload()方法，强制浏览器重新加载页面，从而清除缓存。该方法可以接受一个布尔值参数，表示是否强制从服务器重新加载页面。如果省略参数或传递false，则浏览器可能会从缓存中加载页面。 ``` location.reload(true); ``` 2. 在URL后添加随机数参数，使浏览器强制重新加载页面。可以使用Date对象的getTime()方法获取当前时间的时间戳，并将其作为随机数参数添加到URL中。 ``` var random = new Date().getTime(); window.location.href = "http://example.com/?random=" + random; ``` 3. 清除浏览器缓存。可以通过JavaScript修改HTTP头信息，添加Cache-Control或Expires字段，从而告诉浏览器不要缓存页面。例如，以下代码将页面的Cache-Control设置为no-cache，从而禁用浏览器缓存。 ``` window.addEventListener("pageshow", function(event) { if (event.persisted) { // 页面从缓存中加载 window.location.reload(); } else { // 页面第一次加载 } }, false); // 禁用浏览器缓存 document.header("Cache-Control", "no-cache"); document.header("Expires", "-1"); ```