js实现页面跳转以及返回上一页_、新增通过跳转页面实现,不是弹窗;新增成功后返回上一个列表页面,跳转到第一页,并-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_68250871/article/details/127074638

本文通过三个页面的示例介绍了如何使用HTML与JavaScript实现网页间的导航及利用history API进行前进、后退操作。通过按钮触发location.href改变当前页面地址，history.back()和history.forward()则帮助用户在浏览历史中穿梭。

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

先创建第一个页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="button" id="btn" value="打开02.html" />//按钮
		<script type="text/javascript">
			document.getElementById("btn").onclick = function() {
				location.href = "02.html"//跳转
			}
		</script>
	</body>
</html>

创建第二个页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" id="btn1" value="back" />//返回上一页
		<input type="button" id="btn2" value="打开03.html" />//打开第三个页面
		<input type="button" id="btn3" value="forward()" />//相当于前进
		<input type="button" id="btn4" value="go" />

		<script type="text/javascript">
			document.getElementById("btn1").onclick = function() {
				history.back()
			}
			document.getElementById("btn2").onclick = function() {
				location.href = "03.html"
			}
			document.getElementById("btn3").onclick = function() {
				history.forward()
			}
			document.getElementById("btn4").onclick = function() {
				history.go(1)//1代表back()方法 -1代表forward()方法 1和-1根据个人需求更改
			}
		</script>
	</body>
</html>

第三个页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" id="btn1" value="返回02.html"/>
		<input type="button" id="btn2" value="go"/>
		
		<script type="text/javascript">
			document.getElementById("btn1").onclick=function(){
				location.href="02.html"
			}
			document.getElementById("btn2").onclick=function(){
				history.go(-1)
			}
		</script>
	</body>
</html>