History与Location对象详解-优快云博客

本文详细介绍了HTML5中History对象和Location对象的功能及用法。History对象提供了浏览器历史记录的操作方法，如返回上一页、前进到下一页等；Location对象则用于获取和更改当前窗口的URL，包括页面刷新、加载新文档等功能。

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

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="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"
			}
			btn3.onclick=function(){
				history.forward()//跳转到history列表中的下一个页面
			}
			btn4.onclick=function(){
				history.go(-1)//相当于back
				// history.go(1)//相当于forward
			}
		</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"id="btn1" value="assign()" />
		<input type="button"id="btn2" value="reload()" />
		<input type="button"id="btn3" value="replace()" />
		<script type="text/javascript">
			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>