下文笔者讲述JavaScript中History对象的简介说明,如下所示
JavaScript之History对象简介
JavaScript history对象:
是浏览器用于存储访问历史信息
history对象会记载当前浏览器访问过的页面
当页面中存在iframe页面时,window对象的history也会记载iframe中的history信息
注意事项:
window.history可省略window前缀
如:
window.history.go()可简写为history.go()
history对象中属性
| 属性 | 备注 |
| length | 返回浏览历史的数目，包含当前已经加载的页面 |
| scrollRestoration | 利用浏览器特性，使我们在返回上一页或者下一页时，将页面滚动到之前浏览的位置，该属性有两个值，分别是 auto（表示滚动）与 manual（表示不滚动） |
| state | 返回浏览器在当前 URL 下的状态信息，如果没有调用过 pushState() 或 replaceState() 方法，则返回默认值 null |
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>linux28.com-JavaScript</title>
</head>
<body>
<script type="text/javascript">
document.write(history.length + "<br>");
document.write(history.scrollRestoration + "<br>");
document.write(history.state + "<br>");
</script>
</body>
</html>
history对象中方法
| 方法 | 备注 |
| back() | 参照当前页面，返回历史记录中的上一条记录（即返回上一页），您也可以通过点击浏览器工具栏中的←按钮来实现同样的效果 |
| forward() | 参照当前页面，前往历史记录中的下一条记录（即前进到下一页），您也可以通过点击浏览器工具栏中的→按钮来实现同样的效果 |
| go() | 参照当前页面，根据给定参数，打开指定的历史记录，例如 -1 表示返回上一页，1 表示返回下一页 |
| pushState() | 向浏览器的历史记录中插入一条新的历史记录 |
| replaceState() | 使用指定的数据、名称和 URL 来替换当前历史记录 |
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>linux28.com-JavaScript</title>
</head>
<body>
<button onclick="myBack()">back()</button>
<button onclick="myForward()">forward()</button>
<button onclick="myGo()">go()</button>
<button onclick="myPushState()">pushState()</button>
<button onclick="myReplaceState()">replaceState()</button>
<script type="text/javascript">
function myBack(){
history.back();
}
function myForward(){
history.forward();
}
function myGo(){
var num = prompt('请输入一个整数', '1');
history.go(num);
}
function myPushState(){
var state = { 'page_id': 1, 'user_id': 5 }
var title = 'JavaScript'
var url = 'index.html'
history.pushState(state, title, url)
console.log(history.state);
}
function myReplaceState(){
var state = { 'page_id': 3, 'user_id': 5 }
var title = 'history'
var url = 'index.html'
history.replaceState(state, title, url)
console.log(history.state);
}
</script>
</body>
</html>