popstate 监听app、浏览器的返回

最新推荐文章于 2024-06-12 11:11:57 发布

飞扬_柳絮

最新推荐文章于 2024-06-12 11:11:57 发布

阅读量8.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/tjcjava/article/details/84111998

JavaScript 专栏收录该内容

31 篇文章

订阅专栏

在实际开发中，遇到需要在当前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>