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

最新推荐文章于 2024-05-06 15:03:20 发布
最新推荐文章于 2024-05-06 15:03:20 发布
阅读量5.5k 收藏 5
点赞数
分类专栏： javaScript 大前端 文章标签： safari javascript ipad
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45301392/article/details/122116304
版权

一、场景：当标签页面隐藏、然后展示的时候触发事件

涉及到两个网页的跳转 而产生的问题

二、安卓和ios需要分别来处理兼容问题

安卓 中可以直接使用 visibilitychange 来判断标签页展示、还是隐藏

document.addEventListener("visibilitychange", () => { 
  if(document.hidden) {} // 页面被挂起
  else {  // 页面呼出
  	// 增加路由判断 仅当前页面生效
    // if(window.location.pathname === "/activityMidPage"){
    //  // ...
    // }
  }
});

visibilitychange MDN官方文档

ios 中无法触发 visibilitychange 事件，所以需要 pageshow 来做一个兼容

const isIos = /ipad|iPhone|Mac/i.test(window.navigator.userAgent) 
if(isIos) {
  window.addEventListener('pageshow', function(event) {
    // // 增加路由判断 仅当前页面生效
    // if(window.location.pathname === "/activityMidPage"){
    //  // ...
    // }
  }) 
}

pageshow MDN官方文档 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/pageshow_event

X.Py
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
监听浏览器刷新事件,拦截浏览器返回，js监听移动端浏览器页面显示、隐藏
qq_40591925的博客
08-08 9844
注: onbrforeunload和onunload都会在刷新和关闭页面是触发，但是onbeforeunload在onunload之前执行，并且它还可以阻止onunload的执行。那么在页面刷新时执行顺序就是onbeforeunload、onunload、onload。
javascript监听pageshow事件阻止页面进入bfcache
u013611033的博客
09-06 2093
window.addEventListener('pageshow',function(e){ if(e.persisted){ window.location.reload(); } })
js监听页面的显示和隐藏
最新发布
weixin_43617604的博客
05-06 377
下方微信公众号 和微信小程序推荐。
visibilitychange ios设备不生效_iOS用户建议安装，屏蔽系统更新文件效果恢复
weixin_39616222的博客
11-20 595
Hello everybody～对于喜欢越狱的用户来说，买苹果手机除了手机本身的质量问题以外，最看重的就是系统版本。因为越狱工具的开发时间的问题导致可越狱的系统版本往往要比最新开放的系统版本低，买到高版本手机往往意味着要等待好几个月的时间才能越狱。所以绝大多数的玩机党拿到新手机的第一步操作一般都是安装屏蔽系统更新的描述文件。但是从今年 1 月底开始，大量苹果手机用户反映以往用来屏蔽更新 ...
HTML5事件—visibilitychange 页面可见性改变事件
05-15 140
转：https://blog.csdn.net/yusirxiaer/article/details/73480916 又看到一个很有意思的HTML5事件 visibilitychange事件是浏览器新添加的一个事件，当浏览器的某个标签页切换到后台，或从后台切换到前台时就会触发该消息，现在主流的浏览器都支持该消息了，例如Chrome, Firefox, IE10等。虽然这只是一...
监听安卓/IOS 微信浏览器关闭事件
xiamoziqian的博客
02-09 2300
if (window.addEventListener) { window.addEventListener("pagehide", function () { // IOS console.log('页面要关闭了:pagehide'); }) } else { window.onbeforeunload = function () { // 安卓 console.log('页面要关闭了:onbeforeunload'); } } 注意：以上方法浏览器 关闭/刷新
在vue项目中利用popstate处理页面返回的操作介绍
10-14
在Vue项目中，利用`popstate`事件处理页面返回的操作是一项常见的需求，特别是在移动设备上，需要确保用户在按下返回键时能够有明确的交互反馈，例如确认是否真正离开当前页面。本文将详细介绍如何在Vue中实现这一...
JS实现返回上一页并刷新页面的方法分析
10-16
总之，JavaScript在处理跨平台的页面导航和刷新时需要考虑不同的浏览器行为。通过结合使用`pageshow`事件、`PageTransitionEvent`的`persisted`属性以及本地存储，我们可以创建一个适应各种设备的解决方案。理解这些...
ios微信浏览器返回不刷新问题完美解决方法
08-29
我们也可以使用 URL 跳转来解决该问题，即将当前页面的 URL 重新加载到浏览器中。 总结 在本文中，我们详细介绍了 iOS 微信浏览器返回不刷新问题的解决方案。通过使用 pageshow 和 pagehide 事件，我们可以检测...
解决ios微信页面回退不刷新的问题
01-05
在回退后需要刷新的页面加以下js $(function () { var isPageHide = false; window.addEventListener('pageshow', function () { if (isPageHide) { [removed].reload(); } }); window.addEventListener('...
页面可见性改变事件：visibilitychange
mx_csdn的博客
09-29 1842
1、PC浏览器上（以谷歌浏览器为例） 刷新H5页面，会触发该事件，由于刷新导致该页面消失时，会检测到document.visibilityState === ‘hidden’ 切换页面（包括切换离开和切换回来），导致页面暂时不处于激活状态时，会触发该事件。切换离开时document.visibilityState === ‘hidden’，切换回该页面时，document.visibilityS...
visibilitychange 的使用
神膘护体小月半的博客
08-02 562
visibilitychange 的使用
移动端前端开发问题若干踩坑
csj的前端笔记
08-05 385
1.滚动穿透问题 弹出层内容滚动时，body跟随滚动。 解决方案：https://blog.csdn.net/weixin_43921521/article/details/91434165 2.ios浏览器的input，textarea有内上边框阴影 解决方案：css样式 box-shadow:0px 0px 0px rgba(0,0,0,0); -webkit-appearance:non...
监听浏览器页面关闭事件(visibilitychange和unload)
C05230的博客
09-22 7990
监听浏览器的页面关闭事件
js监听手机物理键返回，并解决ios返回立即执行popstate事件的问题
weixin_33748818的博客
04-16 2701
需求有时候我们在做项目时会碰到这样的场景：返回时到指定的页面，而不是按历史返回但是我们无法阻止用户的行为，用户是有可能会点击浏览器的返回键或者手机物理返回键返回的。解决思路使用popstate事件监听返回pushHistory(); window.addEventListener("popstate", function(e) { window.location.href = '...
android webview 事件失效,webview页面切换不能触发visibilitychange事件，这是什么原因...
weixin_42309866的博客
05-26 1272
开/关音乐您的浏览器不支持audio标签!// 操作区域音乐播放var mute = false;$(".u-bgm").find("i").on("tap", function () {if (!mute){$(this).removeClass("fa-bell-o").addClass("fa-bell-slash-o");$(".u-bgm-player").get(0).pause();...
js 实现页面隐藏、关闭、刷新给出对应的提示
CodingNoob
10-26 4374
我们在做项目的时候经常会遇到一些需求，比如在某些页面当点击浏览器刷新 或者关闭的时候会有对应的提示，是否离开或者重新加载此网站。比如csdn写文章的时候就有这个弹窗，这功能就是用onbeforeunload实现的。浏览器切换其他页面或者最小化的时候触发，（ps: 常用于检测考试作弊行为）一般来说，我们希望使用 Page Visibility API，在用户没有看到页面时停止不必要的进程，或者执行一些后台操作。可以下面这几种情况：当用户离开页面时，暂停视频、轮播图或动画。停止一些实时获取数据的API。
vue - 实现类似小程序 onshow() 一样的生命周期钩子方法(监听页面的显示,只要页面
08-04
在Vue中，没有与小程序中的onShow()生命周期钩子方法完全等效的方法，因为Vue不是页面级别的框架，而是组件级别的框架。但是，我们可以通过使用Vue的其他生命周期钩子方法和自定义事件来模拟实现类似的功能。 一种方法是使用Vue的created()生命周期钩子方法来在组件被创建时执行特定的代码。可以在created()方法中注册一个事件监听器，在页面显示时触发事件并执行相关操作。 例如： ``` <template> <div> <!-- Component Content --> </div> </template> <script> export default { created() { // 注册一个事件监听器，在页面显示时触发事件并执行相关操作 this.$eventBus.$on('pageShow', () => { // 在这里执行相关操作 console.log('页面显示了'); }); }, destroyed() { // 组件销毁时，记得取消事件监听 this.$eventBus.$off('pageShow'); } } </script> ``` 在上面的示例中，我们首先在Vue组件的created()生命周期钩子方法中注册了一个名为'pageShow'的事件监听器。然后，在每个页面需要显示时，我们可以在父组件中使用自定义的事件总线（eventBus）来触发'pageShow'事件。 例如： ``` <template> <div> <button @click="showPage">显示页面</button> </div> </template> <script> export default { methods: { showPage() { // 触发'pageShow'事件，通知组件页面将要显示 this.$eventBus.$emit('pageShow'); } } } </script> ``` 这样，当点击"显示页面"按钮时，'pageShow'事件将被触发，从而执行相关操作，并在控制台中打印出"页面显示了"。 需要注意的是，为了实现这样的功能，我们需要在Vue中使用自定义的事件总线（eventBus）来进行事件的触发和监听。简单实现的方式可以是创建一个新的Vue实例作为事件总线，然后将其挂载到Vue原型链上，使得所有的组件都可以访问该事件总线。 例如，在main.js中： ``` import Vue from 'vue' Vue.prototype.$eventBus = new Vue(); ``` 这样，我们就可以在任意组件中使用this.$eventBus来进行事件的触发和监听。 需要注意的是，由于Vue是一个响应式框架，它更关注组件的状态变化。因此，如果需要通过监听页面显示来更新组件状态或数据，更好的方式是使用Vue的其他生命周期钩子方法（如mounted()）来实现。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值