DOM操作浏览器历史记录主要通过window.history对象实现，它提供了几种方法来修改或读取浏览器的历史栈。以下是常见的操作方式：1.history.pushState()用于向历史栈中添加一条新的记录，不会触发页面刷新。history.pushState(state,title,url);state:一个对象，存储与该历史记录相关的信息。title:当前页面的标题（部分浏览器不支持）。ur

珍惜时间，勤奋学习！今天给大家带来《DOM如何操作浏览器历史记录？》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

pushState用于添加新历史记录，语法为window.history.pushState(state, title, url)，其中state存储页面状态，url修改地址栏URL；replaceState则用于替换当前历史记录条目，语法相同但不会新增记录。监听页面变化需监听popstate事件，其回调函数可通过event.state获取状态并更新内容。跨域时History API受限，不可设置不同域的URL。单页应用利用History API实现无刷新导航，兼容旧浏览器可使用polyfill或hash-based路由方案。

DOM操作历史记录，其实就是在浏览器历史记录中穿梭或者修改，让用户在不离开当前页面的前提下，模拟前进后退，或者改变URL而不刷新页面。

History API提供了pushState和replaceState方法，可以修改浏览器的历史记录栈，而window.onpopstate事件则可以监听历史记录的变化。

如何使用pushState添加新的历史记录？

pushState方法允许你向浏览器的历史记录栈中添加一个新的状态。它的语法是：window.history.pushState(state, title, url)。

• state：一个与新历史记录条目相关联的JavaScript对象。当用户导航到新的状态时，会触发popstate事件，并且该对象会作为事件的state属性提供。可以用来存储一些数据，比如当前页面的状态信息。
• title：大多数浏览器会忽略此参数，所以可以传入空字符串。
• url：新的历史记录条目的URL。这个URL不会导致页面刷新，但会出现在浏览器的地址栏中。可以设置为相对URL或绝对URL。如果设置为相对URL，它会相对于当前URL。

例如：

window.history.pushState({page: 1}, '', '/page1');

这会在历史记录中添加一个新的条目，URL变为/page1，并且state对象包含{page: 1}。

replaceState与pushState的区别是什么？

replaceState方法与pushState类似，但是它不是添加一个新的历史记录条目，而是替换当前的条目。它的语法与pushState相同：window.history.replaceState(state, title, url)。

使用场景：比如用户在某个页面进行了某些操作，你想更新URL来反映这些操作，但又不想在历史记录中添加一个新的条目，就可以使用replaceState。

例如：

window.history.replaceState({page: 2}, '', '/page2');

这会将当前的历史记录条目替换为URL为/page2，state对象包含{page: 2}。

如何监听历史记录的变化？

当用户点击浏览器的前进或后退按钮时，会触发popstate事件。你可以通过监听这个事件来响应历史记录的变化。

window.addEventListener('popstate', function(event) {
  if (event.state) {
    // event.state包含pushState或replaceState方法传递的state对象
    console.log('当前页面状态：', event.state);
    // 根据状态更新页面内容
    updatePageContent(event.state);
  } else {
    // 初始页面加载时，state对象为null
    console.log('初始页面加载');
  }
});

function updatePageContent(state) {
  // 根据state对象中的数据更新页面内容
  // 例如，可以根据state.page的值加载不同的内容
  console.log('更新页面内容，当前页码：', state.page);
}

需要注意的是，popstate事件只会在用户通过浏览器的前进或后退按钮导航时触发。使用pushState或replaceState方法修改历史记录不会触发popstate事件。

跨域情况下 History API 的限制

History API 在跨域情况下会受到限制。具体来说，如果你尝试使用pushState或replaceState方法设置一个与当前页面不同域的URL，浏览器会抛出一个安全错误。这是为了防止恶意网站通过修改历史记录来欺骗用户。

例如，如果你的页面位于http://example.com，你不能使用pushState将URL设置为http://evil.com。浏览器会阻止这种操作。

不过，你可以使用postMessage方法在不同的域之间进行通信，并在目标域中调用History API。但这需要你在两个域中都编写相应的代码。

History API 与单页应用（SPA）

History API 是构建单页应用（SPA）的关键技术之一。在SPA中，用户在不同的“页面”之间导航时，实际上并没有发生真正的页面刷新。相反，SPA会使用JavaScript动态地更新页面的内容。

History API 允许SPA更新浏览器的URL，而不会导致页面刷新。这使得用户可以像浏览传统的多页应用一样使用浏览器的前进和后退按钮。同时，SPA还可以使用URL中的hash（#）来表示不同的页面状态。

例如，一个SPA可以使用/表示首页，/products表示产品列表页，/products/123表示ID为123的产品详情页。当用户点击一个产品时，SPA会使用pushState方法将URL更新为/products/123，然后动态地加载产品详情内容。

如何处理不支持 History API 的旧浏览器？

虽然现代浏览器都支持 History API，但仍然有一些旧浏览器不支持。为了兼容这些浏览器，你可以使用一些polyfill库，例如history.js。这些库会模拟 History API 的功能，使得你的代码可以在旧浏览器中正常运行。

另一种方法是使用hash-based routing。在不支持 History API 的浏览器中，你可以使用URL中的hash来表示不同的页面状态。当hash发生变化时，你可以监听hashchange事件，并根据新的hash值更新页面内容。

例如，你可以使用#/products表示产品列表页，#/products/123表示ID为123的产品详情页。当用户点击一个产品时，你可以将URL更新为#/products/123，然后监听hashchange事件并加载产品详情内容。

需要注意的是，hash-based routing有一些缺点。例如，URL中会包含#符号，这可能会影响美观。另外，hash-based routing不利于SEO，因为搜索引擎通常会忽略URL中的hash。

理论要掌握，实操不能落！以上关于《DOM操作浏览器历史记录主要通过window.history对象实现，它提供了几种方法来修改或读取浏览器的历史栈。以下是常见的操作方式：1.history.pushState()用于向历史栈中添加一条新的记录，不会触发页面刷新。history.pushState(state,title,url);state:一个对象，存储与该历史记录相关的信息。title:当前页面的标题（部分浏览器不支持）。url:新的URL（不会加载该URL的内容）。示例：history.pushState({page:1},"Page1","/page1");2.history.replaceState()用于替换当前历史记录，也不会触发页面刷新。history.replaceState(state,title,url);示例：history.replaceState({page:2},"Page2","/page2");3.window.onpopstate事件当用户点击浏览器的“后退”或“前进”按钮时，会触发此事件。可以通过监听这个事件来响应历史记录的变化。window.addEventListener('popstate',function(event){console.log('当前状态:',event.state);});注意：popstate事件》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！