Javascript history 对象详解

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

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典 【面试题+详细答案 1000+】

---

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对象提供了基本的页面导航功能，但在实际开发中应谨慎使用，确保不影响用户体验和尊重用户对浏览历史的控制权。