Location和History对象实现三个页面跳转

最新推荐文章于 2023-06-17 21:22:12 发布

想一起听海

最新推荐文章于 2023-06-17 21:22:12 发布

阅读量1k

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/weixin_68683361/article/details/127078698

版权

Location对象需要用到的href属性，设置完整或者检索完整URL字符串

History对象:有关客户访问过的URL的信息。

想要实现这个页面的跳转就要了解History对象的三种方法分别是back（），forward（），go（“url”ornumber）。代表的是加载History列表中的上一个URL，分别是后退按钮，前进按钮和go（1）代表前进一页等价于forward（）方法，go（-1）代表后退一页相当于back（）方法。

了解这些之后我们可以尝试写出第一个页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="button" id="btn2" value="打开02.html" />
          //设置按钮和文字
		<script type="text/javascript">
			document.getElementById("btn2").onclick = function() { //获取到点击按钮事件的方法
				location.href = "index01.html"          
			}
		</script>
	</body>
</html>

其次创建第二个页面，但切忌第二个HTML的名字应与第一个跳转的名字相同，否则则会出现网页报错跳转失败。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" id="btn3" value="back"/>
		<input type="button"  id="btn4" value="打开03.html"/>
		<input type="button"  id="btn5" value="forward()"/>
		<input type="button"  id="btn6" value="go"/>
		<script type="text/javascript">
			document.getElementById("btn3").onclick=function(){
				history.back()                                  //返回上一个页面
			}
			document.getElementById("btn4").onclick=function(){
				location.href="index001.html"                   //跳转下一个页面
			}
			document.getElementById("btn5").onclick=function(){
				history.forward()                               //回到上一个页面
			}
			document.getElementById("btn6").onclick=function(){
				history.go(1)                                    //与back（）方法等价
			}
		</script>
	</body>
</html>

其次根据第二个页面创建出三个页面的名字index001

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