JS监听浏览器关闭、刷新及切换标签页触发事件

这篇具有很好参考价值的文章主要介绍了JS监听浏览器关闭、刷新及切换标签页触发事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

蛮简单的东西,知道就会,不知道就不会,没什么逻辑可言。简单记录一下,只为加深点儿印象。

visibilitychange

visibilitychange可以监听到浏览器的切换标签页。 

直接上代码: 

<script>
  document.addEventListener('visibilitychange', documentVisibilityChange)

  function documentVisibilityChange() {
    if(document.visibilityState === "hidden") {
      console.log('当前页签隐藏,即打开新页签')
    }
    if(document.visibilityState === "visible") {
      console.log('当前页签显示,即打开当前页签')
    }
  }
</script>

beforeunload 

beforeunload可以监听到页面的关闭,页签切换不会触发

  • 关闭浏览器窗口的时候触发
  • 通过点击当前地址栏或收藏夹进入另一个页面时触发(注意不是打开新页签)
  • 刷新浏览器时触发
  • 重新赋值window.location.href的值的时候触发
  • 通过 form input type="submit"按钮提交一个具有指定action的表单的时候触发(原生事件)

可能还有其他情况,大家感兴趣可以再去了解一下,我只是在浏览器刷新时用到了 文章来源地址https://www.toymoban.com/news/detail-717057.html

<script>
  window.addEventListener('beforeunload', windowBeforeUnload)

  function windowBeforeUnload() {
    console.log('触发beforeunload --->>>')
  }
</script>

到了这里,关于JS监听浏览器关闭、刷新及切换标签页触发事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Python小技巧】Python操控Chrome浏览器实现网页打开、切换、关闭(送独家Chrome操作打包类源码、Chrome浏览器Cookie在哪里?)

    本文将为您展示如何通过Python控制浏览器实现网页的打开、页面的切换和关闭的基本操作,另外对于高阶用户,知道Chrome浏览器Cookie在哪里?可以方便方位Cookie从而实现带登录的更多操作。当然,利用本文方法,你也可以提前登录好,这样就可以直接操作,而免去繁琐的登录

    2024年02月16日
    浏览(61)
  • js 在浏览器窗口关闭后还可以不中断网络请求

    有个需求,我们需要在用户发送数据过程中,如果用户关闭了网页( 包括整个浏览器关闭 ),不要中断数据传递 目前XMLHttpRequest对象是不支持的 http服务器 为了测试效果我们用nodejs写了个http服务器代码 文件名为httpServer.js如下,执行 node httpServer.js 就可以跑起来,支持get,pos

    2024年02月15日
    浏览(52)
  • 〖Python WEB 自动化测试实战篇⑨〗- 实战 - selenium 实现浏览器标签页的切换

    订阅 Python全栈白宝书-零基础入门篇 可报销! 白嫖入口-请点击我。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 Python全栈白宝书专栏, 免费阶段订阅数量4300+ , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:加入社区的小伙

    2023年04月08日
    浏览(90)
  • 浏览器刷新页面,缓存的处理方式,强制刷新

    刷新页面的缓存处理的方式对比 地址栏回车/直接访问 URL 保留强缓存,保留协商缓存,走正常请求流程 点击浏览器刷新按钮 忽略强缓存,保留协商缓存 按f5【command + r】 忽略强缓存,保留协商缓存 ctrl + f5 【command + shift + r 】 忽略强缓存,忽略协商缓存,从服务器端请求最

    2024年02月02日
    浏览(49)
  • Edge 浏览器设置自动刷新

    要在 Microsoft Edge 浏览器中设置自动刷新,您可以使用第三方扩展来实现这一功能。目前,Edge 浏览器本身并没有内置的自动刷新功能。以下是启用自动刷新的一般步骤: 打开 Microsoft Edge 扩展商店:首先,在 Edge 浏览器中打开扩展商店。您可以通过点击浏览器右上角的三个水

    2024年02月02日
    浏览(170)
  • Edge浏览器设置自动刷新

    你可以在 Edge 的扩展商店中搜索并安装这些扩展。以下是一些常见的扩展: Super Auto Refresh: 提供了强大的自动刷新功能,可以根据自定义的时间间隔进行刷新。 Auto Refresh: 允许你设置页面刷新的间隔。 Edge 浏览器的开发者工具中也有自动刷新的选项: 打开开发者工具:按 F

    2024年02月02日
    浏览(68)
  • Edge 浏览器如何设置自动刷新

     Edge 浏览器设置自动刷新有两种方式 安装Edge浏览器自动刷新扩展 更改页面的源代码文件 目录 方式一:Edge 自动刷新扩展实现(推荐)  方式二:更改页面的源代码文件 实现页面自动刷新(不推荐) 方式一:Edge 自动刷新扩展实现(推荐) (1)打开Edge浏览器 (2)打开E

    2024年02月02日
    浏览(51)
  • mac如何强制刷新chorm浏览器

    在 macOS 上,你可以使用以下方法来强制刷新 Chrome 浏览器: 使用快捷键:按住 Shift 键 并同时点击 浏览器刷新按钮 。这会强制浏览器绕过缓存并重新加载当前页面。 使用开发者工具:按下 Option + Command + I 快捷键(或通过右键点击页面并选择 “Inspect”(检查)菜单)打开

    2024年02月15日
    浏览(92)
  • python用selenium打开浏览器后秒关闭浏览器-解决方法

    学习selenium的时候,上手第一个脚本发现成功打开浏览器后,代码执行完毕浏览器又秒关闭了,代码如下: 1、检查代码,代码中没有写driver.quit()或driver.close()方法,也没有其它错误提示; 2、检查版本号,浏览器版本号,驱动版本号,确认版本号没有问题; 3、最后找到解决

    2024年02月11日
    浏览(80)
  • edge浏览器关闭组织托管

    参考链接   edge浏览器出现了“由你的组织管理”的提示,另外的一个的解决方案!_哔哩哔哩_bilibili 我本人是直接删除注册表 计算机HKEY_LOCAL_MACHINESOFTWAREPoliciesMicrosoftEdge  解决了问题 如果怕删除注册表有什么隐患,可以在注册表编辑器中在需要备份的文件目录下店家左

    2024年02月20日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包