JavaScript中Browser之History对象

最新推荐文章于 2025-11-25 00:11:12 发布

原创最新推荐文章于 2025-11-25 00:11:12 发布 · 619 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

JavaScript 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了JavaScript中的History对象，包括其作用、属性和方法。History对象是window对象的一部分，用于管理浏览器的历史记录，如获取历史列表中的网址数、返回上一页或下一页。文章通过示例代码展示了如何使用History对象进行页面跳转。

概述

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

语法

// 返回历史列表中的网址数
window.history.length

// 加载history列表中的前一个url
// 等价于window.history.go(-1)
window.history.back()

// 加载 history 列表中的下一个 URL
// 等价于window.history.go(1)
window.history.forward()

// 加载 history 列表中的某个具体页面
// 参数说明:go()方法的参数既可以是数字也可以是一个URL字符串,
// 其中如果是数字的话1表示上一个页面,-1表示下一个页面
window.history.go(number|URL)

History 对象属性

属性	说明
length	返回历史列表中的网址数

History 对象方法

方法	说明
back()	加载 history 列表中的前一个 URL
forward()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>测试</title>
	</head>
	<body>
		<button type="button" onclick="getLength()">获取历史列表中的网址数</button>
		<button type="button" onclick="toBack()">上一页</button>
		<button type="button" onclick="toForward()">下一页</button>
		<button type="button" onclick="toGo()">返回上两页</button>

		<script type="text/javascript">
			function getLength() {
				// length 属性声明了浏览器历史列表中的元素数量。
				// 注意：Internet Explorer和Opera从0开始，而Firefox、Chrome和Safari从1开始。
				alert("返回历史列表中的网址数：" + window.history.length);
			}

			function toBack() {
				// 加载 history 列表中的前一个 URL
				window.history.back();
			}

			function toForward() {
				// 	加载 history 列表中的下一个 URL
				window.history.forward();
			}

			function toGo() {
				// 返回上两页
				window.history.go(-2);
			}
		</script>
	</body>
</html>