浏览器历史记录

最新推荐文章于 2024-06-25 18:15:00 发布

BenjaminShih

最新推荐文章于 2024-06-25 18:15:00 发布

阅读量1.1w

点赞数

分类专栏：浏览器 javascript 文章标签：浏览器历史返回

本文链接：https://blog.csdn.net/sjn0503/article/details/73089497

版权

本文详细探讨了浏览器历史记录的生成、管理及其在单页面应用中的应用，介绍了history API的使用，包括pushState、replaceState和onPopState事件，以及它们在路由切换中的角色。并讨论了浏览器对历史记录的栈式管理以及限制，如超过最大条数后的处理。

摘要由CSDN通过智能技术生成

前言

项目开发时候，经常会涉及到关于浏览器历史记录的一些操作，比如当前页面点击微信返回按钮后跳转到某一特定页面等等。吃过这个苦，方之水之深，水深不可怕，关键在于勤。

如何生成一条历史记录

简单粗暴的方法，直接在当前页面的地址栏中输入地址
点击页面中有a标签的href
执行location.href = ‘xxx’(location.replace(‘xxx’)生成一条记录取代当前指针所指向的记录)
表单提交跳转（注意只能跳到当前窗口）
使用pushState方法可以不刷新页面就可以生成一条历史记录，页面URL发生改变

简而言之，只要当页面的URL改变时，就会生成一条历史记录。在IE8及更高的版本中、Opera、Firefox、Chrome、Safari3及更高的版本中改变hash也会生成一条历史记录。

浏览器对历史记录的管理

栈

历史记录在浏览器中以栈的形式进行管理，每次增添的历史记录都会在栈的最顶端，以谷歌浏览器为例
html代码：

 <div>
     <a href="demo1.html">demo1</a>
 </div>
 <div>
 <!--通过location.href="demo2.html"改变页面地址：-->
 <button type="button" onclick="changTo(2);">href="demo2.html"</button>     
 </div>
 <div>
     <form action="demo3.html" method="get"