【不得不看的几种js监听浏览器返回,关闭,刷新】

未曾遇你

已于 2022-07-04 10:07:08 修改

阅读量1.4w

点赞数 3

分类专栏： JS 文章标签： javascript 前端

于 2022-04-11 23:09:42 首次发布

本文链接：https://blog.csdn.net/qq_44749901/article/details/124112113

版权

JS 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何使用JavaScript监听浏览器的页面切换、返回和关闭事件。通过`visibilitychange`事件监听页面是否隐藏，利用`popstate`事件结合`pushState`方法捕获返回操作，同时在页面关闭或刷新前触发提示。此外，还提供了无历史记录跳转的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

监听浏览器切换页面

 //切换页面
       document.addEventListener('visibilitychange', function () { //浏览器切换事件
         if (document.visibilityState == 'hidden') { //状态判断        
            console.log("切换页面");
         } else {
   			 console.log("切换页面");
         }
     });

监听浏览器左上角返回页面

原理:

1.页面中我们可以使用javascript window history，后退到前面页面，但是由于安全原因javascript不允许修改history里已有的url链接，但可以使用pushState方法往history里增加url链接，并且提供popstate事件监测从history栈里弹出url。既然有提供popstate事件监测，那么我们就可以进行监听。

2.虽然我们监听到了后退事件，但是页面还是会返回上一个页面，所以我们需要使用pushState增加一个本页的url,代表本页，大家都非常清楚是#

 //返回页面
    pushHistory();
    window.addEventListener("popstate", function(e) {
       alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
  
          //  window.history.go(-1);
    }, false);

    function pushHistory() {
        var state = {
        title: "title",
        url: "#"
        };
        window.history.pushState(state, "title", "#");
    }

监听浏览器返回刷新关闭页面

 window.onbeforeunload=function(){
	//跳转页面或刷新页面会产生提示信息
		if(document.all){
			if(event.clientY < 0){
				// return "确定要离开吗？";
			}
		}else{
				return "确定要离开吗？";
			}
		}

页面链接跳转不记录历史

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。