H5页面浏览器返回时的处理_h5返回多个页面

作者：知新_RL | 2024-02-16 22:31:59

踩

h5返回多个页面

一、多页面下浏览器返回

多页面时浏览器返回的上一个页面如果数据是用ajax加载的则页面会显示不出数据，可以通过以下方法判断在浏览器的返回前进时刷新当前页面，以下方法放到jquery的ready或者HTML的onload方法里，主要针对移动端H5开发


function backForwardListen(){
	//window.performance.navigation.type=2表示当前页面行为是history.back()或history.forward()
	if(window.performance.navigation.type == 2) {
		reloadDeal(window.location.href);//reloadDeal为监测到前进后退时的处理方法，在这里简单的刷新页面所以把当前页面的链接作为参数传进该方法
	}
}

二、单页面下浏览器返回

在单面中通过显示和隐藏不同的部分来模拟页面跳转时，如果触发浏览器返回事件则会关闭当前页面，以下例子可以在触发浏览器返回事件时按自己的需要显示不同的部分，主要针对移动端H5开发

功能说明：页面上有tag1,tag2,tag3三个标签，点击某个标签时该标签的背景变红，其他标签背景变白，当前在tag3标签时浏览器返回会改变到tag2，在tag2时会改变到tag1，在tag1时不变，或者可以跳转到其他页面


<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>测试</title>
		<script type="text/javascript">
			var step = 1;//当前显示页面下标
			function doOnload(){
				if (!!(window.history && history.pushState)){
					//监听物理返回键事件，实现单页面中浏览器返回时显示顺序：tag3 -> tag2 -> tag1
					window.addEventListener("popstate", function() {
						step = history.state;
						console.log(step);
						//当前在第一页返回
						if(!step){
                            //返回到最开始的历史页面以便能退出当前页面
							for(var i=0;i<window.history.length;i++){
						        history.back();
					        }
						} else {
							sel(step);
						}
					});
				} else {
					console.log("不支持History API");
				}
			}
			//选择显示标签
            function sel(t){
				step = t;
				//显示相应的标签内容
				showOrHide(t);
				//处理历史页面
				changeState();
			}
			function showOrHide(t){
				var es = document.getElementsByName("tag");
				for(var i=0;i<es.length;i++){
					es[i].style.background = "#fff";
				}
				document.getElementById(t).style.background = "#ff0000";
			}
			function changeState(){
                //把上一页和当前页一起放入历史页面，当物理返回的时候就能显示上一个页面
				if(step - 1 > 0){
					history.pushState(step - 1, null, window.location.href);
				} else {
					history.pushState(null, null, window.location.href);
				}
				history.pushState(step, null, window.location.href);
			}
		</script>
		<style type="text/css">
			div{
				width: auto;
				height: 30px;
				line-height: 30px;
				font-size: 18px;
				float: left;
				margin-right: 20px;
				padding: 0px 10px;
			}
		</style>
	</head>
	<body onload="doOnload();" style="padding: 20px;">
		<div id="1" name="tag" onclick="sel(1);">TAG1</div>
		<div id="2" name="tag" onclick="sel(2);">TAG2</div>
		<div id="3" name="tag" onclick="sel(3);">TAG3</div>
	</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/97314