Javascript history 对象详解

╰+哭是因爲堅強的太久メ 2024-05-28 10:13 40阅读 0赞

> **还是大剑师兰特**：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

![在这里插入图片描述][4eabd96c56c9464fa4ec4a5ed1785e79.png_pic_center]

<table> 
 <thead> 
  <tr> 
   <th>No.</th> 
   <th align="left">内容链接</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td align="left">Openlayers <a href="https://dajianshi.blog.csdn.net/article/details/136641287" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126706466" rel="nofollow"> 【源代码+示例300+】 </a></td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td align="left">Leaflet <a href="https://dajianshi.blog.csdn.net/article/details/126747176" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126747176" rel="nofollow"> 【源代码+图文示例 150+】 </a></td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td align="left">Cesium <a href="https://dajianshi.blog.csdn.net/article/details/126746759" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126746759" rel="nofollow"> 【源代码+图文示例200+】 </a></td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td align="left">MapboxGL<a href="https://dajianshi.blog.csdn.net/article/details/130108573" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/130108573" rel="nofollow"> 【源代码+图文示例150+】 </a></td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td align="left">前端就业宝典 <a href="https://blog.csdn.net/cuclife/category_12437862.html" rel="nofollow">【面试题+详细答案 1000+】</a></td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][744c5ca9a61140f4b5ebe879fb810b72.png_pic_center]

#### 文章目录 ####

*   *  一、属性
     *  二、方法
     *  三、示例代码
     *  四、注意事项

--------------------

`history`对象是JavaScript的一个内置对象，它允许网页脚本访问和操作浏览器的历史记录。尽管出于安全和隐私原因，它的功能相对有限，但仍然可以用来实现前进、后退等导航功能。

### 一、属性 ###

实际上，`history`对象没有标准的属性，以下为常用操作

*  **长度 (`history.length)`**: 返回历史列表中的条目数量，但实际操作中此属性只读，且在现代浏览器中由于隐私原因可能不可靠。

### 二、方法 ###

*  `history.back()`: 导航到上一页，等同于用户点击浏览器的后退按钮。
 *  `history.forward()`: 导航到下一页，等同于用户点击浏览器的前进按钮。
 *  `history.go(delta)`: 根据`delta`的值前进或后退。如果`delta`是正数，则向前导航；如果是负数，则向后导航；如果是0，则刷新当前页。

### 三、示例代码 ###

// 后退一页
    function goBack() {
        
        history.back();
    }
    
    // 前进一页
    function goForward() {
        
        history.forward();
    }
    
    // 跳转到前两页
    function jumpBackTwoPages() {
        
        history.go(-2);
    }
    
    // 页面加载时自动执行前进操作（示例，实际应用中需谨慎）
    window.onload = function() {
        
        // 注意：此操作可能不受用户欢迎，仅作演示
        history.forward();
    };

### 四、注意事项 ###

1.  **用户体验**：直接使用`history`方法改变浏览历史可能会影响用户体验，尤其是未经用户触发的操作，如自动前进或后退。应该确保这些操作是用户预期的或至少是可接受的。
2.  **隐私限制**：由于隐私保护的增强，现代浏览器对`history.length`等属性的可靠性有所限制，可能无法准确反映历史记录的实际情况。
3.  **不可预测性**：直接操作历史记录可能会导致不可预测的行为，特别是在用户手动浏览页面之后。例如，如果用户已经点击了后退按钮，再调用`history.back()`可能不会按预期工作。
4.  **跨域限制**：由于同源策略的限制，你不能通过JavaScript访问其他源的历史记录。
5.  **替代方案**：对于复杂的页面间导航和状态管理，考虑使用前端路由（如React Router, Vue Router等）可能更为合适，它们提供了更灵活且用户友好的导航解决方案。

总之，虽然`history`对象提供了基本的页面导航功能，但在实际开发中应谨慎使用，确保不影响用户体验和尊重用户对浏览历史的控制权。

[4eabd96c56c9464fa4ec4a5ed1785e79.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/28/de8c89b71c814ae4a2d021c534770e4d.png
[744c5ca9a61140f4b5ebe879fb810b72.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/28/f6c7832801a541da8a5e51a6f666df40.png