History 对象包含用户(在浏览器窗口中)访问过的 URL。
History
对象是
window
对象的一部分,可通过
window.history
属性对其进行访问。
1.1 History对象属性
属性
|
说明
|
length
|
返回当前窗口历史列表中的网址数
|
1.2 History对象方法
方法
|
说明
|
back()
|
加载
history
列表中的前一个
URL
。 调用该方法的效果等价于点击后退按钮或调用
history.go(-1)
。
|
forward()
|
加载
history
列表中的下一个
URL
。 调用该方法的效果等价于点击前进按钮或调用
history.go(1)
。
|
go(num)
|
加载
history
列表中的某个具体页面。 该参数可以是数字,使用的是要访问的
URL
在
History
的
URL
列表中的相对位置。(
-1
上一个页面,
1
前进一个页面
)
。或一个字符串,字符串必须是局部或完整的URL
,该函数会去匹配字符串的第一个
URL
。
|
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="春.html">春</a>
<a href="夏.html">夏</a>
<a href="秋.html">秋</a>
<a href="冬.html">冬</a>
<hr>
<h1>这里是春天页面</h1>
<hr>
<button id="btn1">后退</button>
<button id="btn2">前进</button>
<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
btn1.onclick = function () {
history.back();
}
btn2.onclick = function () {
history.forward();
}
</script>
</body>
</html>