网页页面退出检测- 解决unload onbeforunload不好用

2024-06-02 08:06:28

网页页面退出检测

写在2020-03-11，亲测可用~~ 拒绝转载抄袭，误人子弟！！！

最近写代码的时候遇到一个问题，那就是需要检测网页退出状态。本来寻思上网搜索一下，发现CSDN上全是拷贝的，要不就是好多年前的东西，根本没法用。
其实网上大多数是使用unload & onbeforeunload 进行检测的。包括某鸟教程。里面的的代码都大同小异，反正归根结底就是不好用。

方案1，使用visibilityState

网上的介绍一大堆我就不抄了，主要就是这个东西可以做到什么手机、电脑页面的可见处理。具体兼容性和属性都可以看看MDN上的介绍。里面的 hidden 属性在“用户不可见（发挥想象，什么换了个网页标签，后台，最小化，关闭）“ 的时候会被检测到。具体代码如下：

document.addEventListener('visibilitychange', function () {if (document.visibilityState === 'hidden') {document.title = '页面不可见';}if (document.visibilityState === 'visible') {document.title = '页面可见';}
});

这个东西还可以像樊小书生的CSDN 学习。

一般在项目中，用户登录之后有消息通知的时候，用户头像上面会有一个消息数来提醒用户，但这个数字要保证新打开一个页面的时候是正确的，当切换浏览器的tab再回来的时候还要保证正确性。摘抄自樊小书生的CSDN介绍，侵删。

但是这种情况也有缺点，我不要什么不可见，我就要关闭！那就往下接着看咯~

方案2，使用 sendBeacon 方法

这种描述都可一看(MDN)[https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/sendBeacon] 。这个东西还是很好的，会发POST给指定的URL。这样就能很好的解决就想要关闭时执行。参考代码：

window.addEventListener('unload', function(event){navigator.sendBeacon(URL, analyticsData);});

我是小白就解释给小白看下。里面 “URL就是要post 内容的地址，比如要是用cgi的话可能就是 setup_cgi 之类的，类似于form 里面的action属性。analyicsData 就是要post的内容了，可以把要发的放进字符变量中进行传入。”

网页页面退出检测- 解决unload onbeforunload不好用相关推荐

php泛目录seo静态泛目录批量千万网页页面生成程序
解决百度php泛目录千万网页页面生成程序用于解决:蜘蛛少,收录慢的问题,适合冷门行业内容产出难度高的网站. seo优化大致方向:建立非长久运营站群>用此程序生成大量页面引蜘蛛>将蜘蛛导入 ...
前端如何检测到当前的网页已经退出_js监听浏览器离开页面操作
序言大家是否经常遇到在关闭网页的时候,会看到一个确定是否离开当前页面的提示框?想一些在线测试系统.信息录入系统等就经常会有这一些提示,避免用户有意或者无意中关掉了页面,导致数据丢失.这里面的实现过程 ...
android webview 网页图片加载不出来、显示不全、进入某页面退出，h5页面滑不了，点不了等功能异常等问题集锦
在我们的android开发中,难免会嵌套一些h5页面在APP中,固然是减轻了开发者的负担,但也容易遇到一些很奇怪的问题. 一.网页图片加载不出来此前笔者公司由于h5网页链接频繁被劫持篡改(链接被篡改 ...
wifi信号手机测试软件,专业的WiFi检测工具有哪些？如何解决wifi信号不好？
原标题:专业的WiFi检测工具有哪些?如何解决wifi信号不好? 有朋友wifi测试软件有哪些?WiFi信号和声音一样,强弱都是可以测量的,检测WiFi的方法有很多,作为普通的家庭用户,我们有时需要测 ...
解决移动端项目中苹果ios和安卓android手机点击输入框网页页面自动放大缩小
一.需求问题在公司的项目开发中,我们经常需要开发移动端的项目.但是,在移动端中,点击输入框的时候,网页页面会自动放大或者缩小.这个也并不是我们所想要的,我们只需要向输入框中输入内容就可以了. 二.需 ...
浏览器崩溃_安装谷歌浏览器后打开网页时出现页面崩溃的解决办法
崩溃页面如下图解决办法: 第一步:回到电脑桌面,对着谷歌浏览器快捷图标右键,在弹出的对话框中选择"属性".如下图第二步:在属性对话框中,在"目标"对应的值尾 ...
html页面在ie上出现404怎么解决,ie浏览器网页上有错误解决方法详解
ie浏览器网页上有错误解决方法详解最近网友反馈我的浏览器左下角总显示"网页上有错误",我已经修复过IE了,可是不管用.然后在浏览器上看不到网上的视频和图片的播放.在QQ空间上输入 ...
ie打开本地html页面慢,Win10系统网页打开缓慢怎么解决？IE浏览器打开网页慢怎么应对？...
有些用户对自己家的网速他别没有信心,不是宽带不够兆,而是Win10系统的网速被网络模式限制了,笔者使用两个系统同时打开同一个网页,发现Win10正式版的网速确实没有Win7系统快,最明显的是无线网络, ...
HTML文本错位,DIV+CSS网页错位诊断和解决方法
你地DIV+CSS网页错位的概念是否了解,这里和大家分享一下常见DIV+CSS网页错位问题及解决方法,希望对你的学习有所帮助. DIV+CSS网页错位诊断随着WEB2.0标准化设计理念的普及,国内很 ...

最新文章

热门文章