一篇文章带你了解JavaScript Window History
回复“ 前端 ”即可获赠前端相关学习资料
今
日
鸡
汤
孤帆远影碧空尽，唯见长江天际流。一、前言
window.history 对象可以不用窗口window前缀编写。为了保护用户的隐私,有限制的JavaScript可以访问此对象。
history.back() - 与点击浏览器中的back按钮相同。
history.forward() - 与点击浏览器中的forward按钮相同。
二、history对象
window.history对象包含浏览器会话历史记录，在当前框架或窗口中访问的所有页面的列表，window.history可以编写没有窗口前缀的对象。
但是，为了保护用户的隐私，JavaScript如何访问此对象存在一些限制。window.history 对象包含浏览器历史记录。
三、获取访问的页面数
该history.length属性返回浏览器会话历史记录中当前窗口的页面数，还包括当前加载的页面。
例
var result = history.length; // 返回当前会话历史记录的大小
完整代码：
<html>
<title>项目</title>
<body style="background-color: aqua;">
<p>历史记录列表中的URL数:</p>
<p id="para">
</p>
<p> <b>注意:
</b>本示例在新框架中打开，并将被视为新的"会话":</p>
<script>
var result = history.length;
document.getElementById("para").innerHTML = result;
</script>
</body>
</html>
可以使用此属性来找出用户在当前浏览器会话期间访问了多少页面。
1. 返回上一页
该history.back()方法将历史记录列表中的上一个URL加载。
这与在浏览器中单击“后退按钮”相同。
<html>
<title>项目</title>
<body style="background-color: aqua">
<button onclick="history.back();">Go Back</button>
<p><b>Note:</b> 单击此处的“后退”按钮将不会执行任何操作，因为历史记录列表中没有先前的URL</p>
</body>
</html>
上面的代码将显示以下输出。
2. 前进到下一页
该history.forward()方法将在历史记录列表中加载下一个URL。
这与在浏览器中单击“转发按钮”相同。
<html>
<title>项目</title>
<body style="background-color: aqua;">
<button onclick="history.forward();">前进</button>
<p> <b>注意:</b>单击此处的"前进"按钮将不会执行任何操作，因为历史记录列表中没有下一个URL:</p>
</body>
</html>
上面的代码将显示以下输出（如果历史记录列表中不存在下一页，则此示例将不起作用）：
3. 转到特定页面
可以使用 history.go() 方法从会话历史记录中加载特定页面。
此方法将整数作为参数，负整数在历史记录中向后移动，正整数在历史记录中向后移动。
例
<html>
<title>项目</title>
<body style="background-color: aqua;">
<button onclick="history.go(-2);">回退第2页</button>
<p> <b>注意:</b>单击此处的"回退第2页"按钮将不会执行任何操作，因为历史记录列表中没有先前的URL。</p>
</body>
</html>
上面的代码将显示以下输出：
四、总结
本文基于JavaScript基础，介绍了如何通过window.history访问 JavaScript浏览器对象，如何获取对应网页的页数 访问网页的上一页，下一页，访问特定的页面，都做了详细的讲解。通过用丰富的案例帮助大家更好理解。
希望大家可以根据文章的内容，积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。
使用JavaScript 语言，方便大家更好理解，希望对大家的学习有帮助。
------------------- End -------------------
往期精彩文章推荐：
欢迎大家点赞，留言，转发，转载，感谢大家的相伴与支持
想加入前端学习群请在后台回复【 入群 】
万水千山总是情，点个【 在看 】行不行