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

最新推荐文章于 2024-08-09 12:12:40 发布

Jeremy Sun

最新推荐文章于 2024-08-09 12:12:40 发布

阅读量1w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： web 文章标签：移动端监听页面刷新、关闭事件 html5移动端无法监听页面刷新、关闭 beforeunload事件移动端beforeunload无效 vuex刷新页面数据丢失

本文链接：https://blog.youkuaiyun.com/weixin_44431295/article/details/98876528

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

背景

最近公司要更新一下官网，由于时间问题，决定采用vue来开发，由于vue刚刚使用不久，小白一个，期间遇到不少坑，关于页面刷新导致vuex（store）里面的数据消失问题尤为头疼，说一下自己的解决方案。

解决思路

通过监听页面刷新或者关闭来将vuex里面的数据保存到sessionStorage里，在页面加载时读取sessionStorage里的状态信息，更新vuex的数据。话不多说，直接上代码

	//  在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem('store')) {
   
   
      this.$store.

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Jeremy Sun

关注关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
8
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue2 - [兼容PC和手机H5] 详细监听浏览器刷新 / 关闭 / 前进后退事件，用户点击关闭和刷新页面前 “拦截“ 操作并弹出提示框（实时监听用户关闭或刷新网页，触发时文字提醒并执行自定义操作）

资深程序员

11-02

2530

vue监听页面关闭和刷新，vue中如何监听页面刷新和关闭事件，vue中监听浏览器窗口关闭事件,并在窗口关闭进行操作，vue怎么知道用户关闭了网页，vue如何监听刷新网页操作并截断，vue移动端手机h5网页手机网站监听浏览器刷新关闭，vue当页面关闭或刷新时怎么提示用户离开不保存数据，vue项目监听浏览器窗口或标签页关闭，并在页面关闭/刷新前发送请求，vue怎么只在某个页面监听,其他页面不监听，vue监听刷新和关闭怎么离开页面时注销释放，vue怎么阻止浏览器前进和后退并提示，页面跳转离开后依旧可以监听到刷新和

vue 解决addRoutes动态添加路由后刷新失效问题(跳转“404”页面)

热门推荐

JC.Lin的博客

12-21

2万+

这篇文章主要介绍了vue 解决addRoutes动态添加路由后刷新失效问题，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧前言某些场景下我们需要利用addRoutes动态添加路由，但是刷新后就会失效，前段时间项目里刚好遇到了这个应用场景，所以就花时间研究了一下，做下分享跟记录，说的不对的地方，请大家指正。应用场景：用户a登录进系统，用户挑选店铺后跳转到店铺详情首页，进入到动态...

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

解决Vue中的生命周期beforeDestory不触发的问题

10-15

主要介绍了解决Vue中的生命周期beforeDestory不触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

离开浏览器事件beforeunload不起效果？你使用的方式不对而已

qq_33297737的博客

10-13

6552

离开浏览器事件beforeunload不起效果？你使用的方式不对而已

vue ios上vuex刷新丢失问题以及beforeunload事件失效问题

u014678583的博客

07-10

1681

原因：IOS是卸载了onunload和beforeunload事件，改为pagehide代替 APP.vue中修改为 var isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isiOS) { //在页面刷新时将vuex里的信息保存到缓存里 window.addEventListener("pagehide", () =&gt

vue 部分 ios机型上vuex刷新丢失问题，不支持localStorage以及beforeunload事件失效问题

sxl131415的博客

09-01

1219

看到网页上很多说使用store.js来解决，在这里不适用，没有解决。原因：IOS是卸载了onunload和beforeunload事件，改为pagehide代替 APP.vue created(){ //在页面刷新时将vuex里的信息保存到localStorage里 // window.addEventListener("beforeunload",()=>{ // localStorage.setItem("messageStore",JSON.stringify(thi.

浏览器beforeunload不生效

笔记库

08-09

1144

【代码】浏览器beforeunload不生效。

js阻止浏览器页面关闭,event.preventDefault()无法调用

最新发布

06-26

我们正在处理的问题：在JavaScript中，当尝试阻止浏览器页面关闭时，发现使用event.preventDefault()无效，需要寻找替代方案或理解原因。根据引用[2]和引用[3]的信息，我们可以知道：1.在beforeunload事件中，调用...

移动端H5页面返回并且刷新页面（BFcache）

weixin_30877181的博客

11-05

2414

项目中的需求：点击浏览器中的返回按钮，要让页面重新加载资源。因为这部分的资源每次去加载的内容都不一样，如果返回的时候，还是看到原先的内容，那做这个内容块的意义就很小了；而如果用户看完了这部分内容，再返回来的时候，这个地方换成了新的内容，这样就能体现这部分的价值了。而对于浏览器来说，大部分浏览器的返回是直接使用缓存的，不会执行任何的javascript代码。原因：部分浏览器在后退时不会触发onl...

监听微信浏览器页面关闭事件，解决onbeforeunload无效及ajax请求无法发出问题

weixin_41519423的博客

03-12

6628

1、onbeforeunload来监听用户离开，浏览器可以，但是在微信中无效。 window.onbeforeunload = ()=>{ //通过ajax告诉后台，用户离开页面 $.ajax({ url:"http://****", type:'post', data:{}, async:true, ...

extjs使用pagingtoolbar时，点击下一页，出现查询结果和查询条件不的解决办法

02-13

extjs的pagingtoolbar 点击下一页时，出现store的load时间，但是只有start和limit这两个参数，这样就出现了，点击下一页的时候，查询出的结果和条件不符合。虽然可以通过一次查处所有符合条件的记录，然后根据传入的条件筛选的方法，但是我更喜欢这样～

监听浏览器窗口关闭事件onbeforeunload不起作用

小森努力努力再努力i

06-10

2107

先贴代码 <body>    &lt

js的window.onbeforeunload，onunload，window.addEventListener(‘pagehide‘, () =＞ {}手机浏览器不生效；如：UC等

Tigerismy的博客

09-21

847

一个小意外

监听浏览器窗口关闭onbeforeunload不起作用的原因

wangyuiba1314的博客

06-29

4332

监听浏览器窗口关闭onbeforeunload不起作用的原因

ios端beforeunload事件不管用的问题

LI_YICHAO的博客

07-27

1557

ios端beforeunload事件不管用的问题 ios端beforeunload事件不管用的问题原先写的这种 window.addEventListener("beforeunload",()=>{ }) 改为下面的即可 window.addEventListener("pagehide",()=>{ })

window.onload 不触发的解决办法

zinbin的博客

06-09

9339

踩坑经历昨天我在写前端代码时，有个需求是：提交表单后，后台返回一个数据到前端页面的隐藏域中，在这个页面加载完成后，判断这个隐藏域中是否有内容，有则弹出后台返回的信息。我首先想到的就是用 window.onload = function(){...} 的方式在页面加载完后实现对应的操作。当我测试功能的时候，竟翻车了，window.onload 里面的内容完全不触发。我也做了其它的测试，包括使用 jQuery 的 ready() 方法和 jQuery 自执行的方法来测试，这些方法能执行，但还是达不到我想要的效

js如何监听页面的展示与隐藏(visibilitychange) 以及苹果部分机型 safari浏览器无法监听到(visibilitychange)的处理办(pageshow)。

Xpy 的博客

12-23

6176

一、场景：当标签页面隐藏、然后展示的时候触发事件涉及到两个网页的跳转而产生的问题二、安卓和ios需要分别来处理兼容问题安卓中可以直接使用 visibilitychange 来判断标签页展示、还是隐藏 document.addEventListener("visibilitychange", () => { if(document.hidden) {} // 页面被挂起 else { // 页面呼出 // 增加路由判断仅当前页面生效 // if(window.l

vue 监听网页关闭/浏览器关闭事件

yangqii的博客

01-06

2万+

参考博文：vuejs中监听窗口关闭和窗口刷新事件的方法 1.methods中定义窗口关闭/浏览器关闭之后处理内容，例如删除cookie、session、local storage 等 methods: { beforeunloadHandler(e) { console.log('关闭窗口之后') } } 2.mounted 绑定窗口关闭监听事件 mounted() { window.addEventListener('beforeunload', e =&g

微信h5网页监听关闭事件onunload，onbeforeunload，pagehide没有用的解决办法

sinat_25884075的博客

02-26

1万+

首先请原谅我折腾了很久，所以才要记下来。我的需求是用户在h5直播间关闭网页时，监听关闭事件，然后异步发送一条消息给后台，此人已经离开。 onunload，关闭网页触发 onbeforeunload，关闭网页及onunload回调前触发 pagehide，同onunload，适用于高版本的ios系统，我是苹果6，10.0以上系统一，先发ios平台解决方案 window.addEve...