js总结7-优快云博客

本文介绍了如何使用History对象和Location对象实现网页间的导航与位置控制。History对象提供了back(), forward(), go()等方法用于模拟浏览器的前进、后退操作；Location对象则提供了host, hostname, href等属性以及assign(), reload(), replace()等方法来获取和设置当前页面的URL。

History对象

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

back（）：加载History列表上的一个URL

forward(): 加载History列表下的一个URL

go("url" or number):加载History列表中的一个URL或要求浏览器移动指定的页面数

back()方法相当于后退按钮

forward()方法相当于前进按钮

go(1)代表前进1页，等价于forward()方法

go(-1)代表后退1页，等价于back()

第一个页面


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

第二个页面


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" name="" id="btn1" value="back" />
		<input type="button" name="" id="btn2" value="打开03.html" />
		<input type="button" name="" id="btn3" value="forward" />
		<input type="button" name="" id="btn4" value="go" />
		<script type="text/javascript">
			btn1.onclick=function(){
				history.back()//返回上一页
			}
			btn2.onclick=function(){
				location.href="03.html"//跳转到03页面
			}
			btn3.onclick=function(){
				history.forward()//跳转下一页
			}
			btn4.onclick=function(){
				history.go(1)//跳转下一页
			}
		</script>
	</body>
</html>

第三个页面


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

Location对象

Location对象：有关当前URL的信息

属性：
host ：设置或检索位置或URL的主机名和端口号

hostname：设置或检索位置或URL的主机名部分
href：设置或检索完整的URL字符串
方法：
assign("url")：加载URL指定的新的HTML文档
reload()：重新加载当前页
replace("url")：通过加载URL指定的文档来替代当前文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" name="" id="btn1" value="assign" />
		<input type="button" name="" id="btn2" value="reload" />
		<input type="button" name="" id="btn3" value="replace" />
		<script type="text/javascript">
			console.log(location.host)
			console.log(location.hostname)
			console.log(location.href)
			btn1.onclick=function(){
				location.assign("https://www.baidu.com/")
			}
			btn2.onclick=function(){
				location.reload()
			}
			btn3.onclick=function(){
				location.replace("https://www.baidu.com/")
			}
		</script>
	</body>
</html>