JavaScript Window History

最新推荐文章于 2025-08-12 14:37:12 发布

原创最新推荐文章于 2025-08-12 14:37:12 发布 · 850 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #对象 #Window History #forward #back

本文介绍如何使用JavaScript的window.history对象来实现浏览器的前进和后退功能，通过两个示例展示了具体的实现方式。

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

window.history 对象包含浏览器的历史。

Window History

window.history 对象在编写时可不使用 window 这个前缀。

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

一些方法：

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同

Window History Back

history.back() 方法加载历史列表中的前一个 URL。

这与在浏览器中点击后退按钮是相同的：

实例

在页面上创建后退按钮：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<script>
	function goBack(){
		window.history.back();
	}
</script>
<input type="button" value="back" onclick="goBack()">
</body>
</html>

代码输出效果：转到上一页

Window History Forward

history forward() 方法加载历史列表中的下一个 URL。

这与在浏览器中点击前进按钮是相同的：

实例

在页面上创建一个向前的按钮：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<script>
	function goForward(){
		window.history.forward();
	}
</script>
<input type="button" value="forward" onclick="goForward()">
</body>
</html>

代码输出效果：转到下一页。