如何在不重新加载页面的情况下更改浏览器地址栏 - HTML/Javascript [重复]

Posted 2023-03-05

【中文标题】如何在不重新加载页面的情况下更改浏览器地址栏 - HTML/Javascript [重复]

【英文标题】：How to change browser address bar without reloading page - HTML/Javascript [duplicate]

【发布时间】：2011-08-02 05:58:28

【问题描述】：

可能重复：How does GitHub change the URL but not the reload?

大家好，

我注意到 Github.com 在浏览存储库时并不强制用户下载网页，而是使用 AJAX 来刷新页面内容。

Github 还将浏览器地址栏更改为代表内容的真实地址。如果不是在 url 中使用 # hashtags，我不知道如何实现这一点。

---

简而言之： github 使用 ajax 加载新网页，而不使用主题标签。他们是如何做到这一点的？

---

有什么想法吗？

【问题讨论】：

html5 History API 正是您所寻找的。​​span>

【参考方案1】：

通过使用：

window.history.pushState("string", "Title", "newUrl");

这是 HTML 5 中的新功能。

您的 url 将更改为 newUrl 而无需重新加载页面。

注意：方法中的title参数不会改变html页面的标题。这用于命名浏览器历史记录中的页面，以防您返回然后前进。

【讨论】：

仅供参考：developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/…

【参考方案2】：

看看HTML5 history api。如果您打算使用它，获取一个包装它的库，甚至可能添加一个回退到位置哈希值将是一个好主意。

https://github.com/browserstate/history.js 一眼看上去还不错。