JS监听浏览器关闭、刷新及切换标签页触发事件代码示例
作者：会说法语的猪
浏览器是客户端,客户端的操作服务器是监听不到的,所以可以用js来监听,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的表单的时候触发（原生事件）
可能还有其他情况，大家感兴趣可以再去了解一下，我只是在浏览器刷新时用到了
<script>
window.addEventListener('beforeunload', windowBeforeUnload)
function windowBeforeUnload() {
console.log('触发beforeunload --->>>')
}
</script>附：页面链接跳转不记录历史
function fnUrlReplace(href) {
if (href && /^#|javasc/.test(href) === false) {
if (history.replaceState) {
history.replaceState(null, document.title, href.split('#')[0] + '#');
location.replace('');
} else {
location.replace(href);
}
}
};
fnUrlReplace(targetURL);
fnUrlReplace后面直接写一个链接，这样既可以跳转又不会记录历史，而且还做了兼容性处理，兼容到IE6。
总结
到此这篇关于JS监听浏览器关闭、刷新及切换标签页触发事件的文章就介绍到这了,更多相关JS监听浏览器关闭刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！