popstate 监听app、浏览器的返回

最新推荐文章于 2025-10-15 18:25:00 发布

原创最新推荐文章于 2025-10-15 18:25:00 发布 · 8.3k 阅读

11 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一种在Web开发中监听app或浏览器返回事件的实用方法，通过使用history.pushState和监听popstate事件，可以有效捕捉页面的返回操作，适用于各种应用场景。

在实际开发中，遇到需要在当前web页面监听app、浏览器返回的情况，进过一顿搜索后，终于找到一种比较靠谱的方式！

下面话不多说，直接上代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
	<title>popstate 监听返回</title>
	<style type="text/css">
	</style>
</head>
<body>
    
	<div class="cat">应用场景一：监听当前页面返回</div>
    <div class="cat">应用场景二：监听第三方返回</div>
	<a href="http://baidu.com">跳转到百度</a>
	<script>
	    window.onload = function(){
	        pushHistory();
            setTimeout(function(){ //处理:部分机型加载页面时即会执行popstate事件的问题
              /*popstate触发时机：当前历史条目为pushState创建时，事件被触发*/
              window.addEventListener('popstate',function(event){
                    let state = event;
                    console.log(state);
                    alert(state + "-------------");
              },false);
            },100);
	    }
	    /*pushState：往history添加历史条目
	      state：状态对象,popstate事件触发时，该对象会传入回调函数  
          title：新页面标题(目前浏览器忽略该参数)
	      URL：新的历史URL记录*/
	    function pushHistory(){
	        var state = {title: "呵呵哒",url: "#"};
	        window.history.pushState(state,"新页面标题#","new_url");
	    }
	</script>
</body>
</html>