javascript - 在不重新加载页面的情况下修改查询字符串

Question

我正在创建一个照片库，并希望能够在浏览照片时更改查询字符串和标题。

我正在寻找的行为经常在连续/无限页面的某些实现中看到，当您向下滚动时，查询字符串不断增加页码(http://x.com?page=4)等。这在理论上应该很简单，但是我想要在主要浏览器中安全的东西。

我找到了 this great post ，并试图按照 window.history.pushstate 的示例进行操作，但这似乎对我不起作用。而且我不确定它是否理想，因为我真的不关心修改浏览器历史记录。

我只想提供为当前查看的照片添加书签的功能，而无需在每次更改照片时重新加载页面。

这是修改查询字符串的无限页面示例:http://tumbledry.org/

UPDATE 发现了这个方法:

window.location.href = window.location.href + '#abc';

Answer 1

如果您正在寻找 Hash 修改，您的解决方案可以正常工作。但是，如果您想更改查询，您可以使用 pushState，如您所说。这是一个可以帮助您正确实现它的示例。我测试过它工作正常:

if (history.pushState) {
    var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?myNewUrlQuery=1';
    window.history.pushState({path:newurl},'',newurl);
}

它不会重新加载页面，但它只允许您更改 URL 查询。您将无法更改协议(protocol)或主机值。当然，它需要能够处理 HTML5 History API 的现代浏览器。

更多信息:

http://diveintohtml5.info/history.html

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history