从基于哈希的导航切换到HTML5历史API

Switching from hash-based nav to HTML5 History API

本文关键字：HTML5 历史 API 于哈希 导航      更新时间：2023-09-26

我想弄清楚如何使用历史API为我的网页。目前，它是一个简单的页面，导航栏通过将ID的display更改为none或block来切换内容可见性。

我想切换到历史API，因为浏览器后退按钮内存，但所有的例子，我发现使用AJAX加载数据从一个单独的文件点击。我的页面不够大，不能保证异步加载。

是否有任何方法为常规url触发CSS属性改变的方式哈希做?

不，CSS只能通过URL的哈希组件来响应:target。然而，如果你愿意，你仍然可以利用历史API;您只需要一点点额外的javascript。例如，你可以给<html>元素一个data-target属性，它会根据URL而变化，然后你的css可以通过以下方式对此做出反应:

[data-target="home"] #home-page { display: block; }

History API允许您为每个条目存储一些状态，因此您可以使用它来存储目标标识符，然后在"popstate"处理程序中再次检索它-例如

history.pushState({ target: 'home' }, '', '/home')
document.documentElement.dataset.target = 'home'
window.addEventListener('popstate', function (e) {
  document.documentElement.dataset.target = e.state.target
})
相关文章：