我似乎梦到了Chrome(开发频道)通过JavaScript实现更新地址栏的方法(路径,而非域名)而不重新加载页面,但我找不到我认为我读过的文章。
我是疯了还是确实有这种方法(在Chrome中)?
顺便说一下,我不是在谈论window.location.hash等。 如果上述方法存在,则此问题的答案将不正确。
我似乎梦到了Chrome(开发频道)通过JavaScript实现更新地址栏的方法(路径,而非域名)而不重新加载页面,但我找不到我认为我读过的文章。
我是疯了还是确实有这种方法(在Chrome中)?
顺便说一下,我不是在谈论window.location.hash等。 如果上述方法存在,则此问题的答案将不正确。
现在大多数“现代”浏览器都支持此功能!
这是我阅读的原始文章(发布于2010年7月10日):HTML5:更改浏览器URL而不刷新页面。
如果您想深入了解pushState / replaceState / popstate(即HTML5历史记录API),请参阅MDN文档。
简而言之,您可以这样做:
window.history.pushState("object or string", "Title", "/new-url");
看看我回答 Modify the URL without reloading the page 的问题,可以了解一些基础的操作方法。
../new-url
或 ../../new-url
)。至少在 Chrome 中,它们似乎会按照你的期望进行操作。 - Mahnwindow.replaceState
更容易设置并且通常更受欢迎,例如当您希望在用户更改下拉菜单或搜索字段的值后更新 URL 时。如果您想使用 pushState
,则还需要正确支持 onpopstate
事件。 - Kosstate
。state
对象是一个 JavaScript 对象,它与由 pushState()
创建的新历史记录条目相关联。每当用户导航到新的 state
时,就会触发 popstate
事件,并且事件的 state
属性包含历史记录条目的 state
对象的副本。state
对象可以是任何可序列化的东西。因此,它实际上不仅仅是 "object or string"
。文档:https://developer.mozilla.org/en-US/docs/Web/API/History/pushState - David Murdoch只更改井号后面的内容 - 旧版浏览器
document.location.hash = 'lookAtMeNow';
更改完整的URL。Chrome,Firefox,IE10+
history.pushState('data to be passed', 'Title of the page', '/test');
上述操作会添加一个新的历史记录,因此您可以按“返回”按钮返回到先前的状态。要在不添加新条目到历史记录的情况下直接更改URL,请使用
history.replaceState('data to be passed', 'Title of the page', '/test');
现在尝试在控制台中运行这些命令!
history.replaceState
在 Firefox 66.0b1 中添加到历史记录。 - azzamsa更新David的回答,以便甚至检测不支持pushstate的浏览器:
if (history.pushState) {
window.history.pushState(stateObj, "title", "url");
} else {
window.history.replaceState(stateObj, "title**", 'url');
// ** It seems that current browsers other than Safari don't support pushState
// title attribute. We can achieve the same thing by setting it in JS.
document.title = "Title";
}
stateObj
状态对象是一个与传递给 replaceState 方法的历史记录条目相关联的 JavaScript 对象。状态对象可以为 null。
title
大多数浏览器当前忽略此参数,尽管它们将来可能会使用它。在这里传递空字符串应该对方法的未来更改是安全的。或者,您可以传递一个短标题来表示状态。
url 可选的
历史记录条目的 URL。新 URL 必须与当前 URL 相同; 否则,replaceState 将抛出异常。
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?foo=bar';
window.history.pushState({path:newurl},'',newurl);