修改查询string而不重新加载页面
我正在创build一个照片库,并希望能够在浏览照片时更改查询string和标题。
我正在寻找的行为往往看到连续/无限页面的一些实现,当你向下滚动查询string不断递增页码( http://x.com?page=4 )等。这应该是理论上很简单,但我希望在主stream浏览器中安全。
我发现这个伟大的职位 ,并试图按照window.history.pushstate
的例子,但似乎并没有为我工作。 而且我不确定这是否理想,因为我并不在乎修改浏览器历史logging。
我只是希望能够为当前浏览的照片添加书签,而无需在每次更改照片时重新加载页面。
以下是修改查询string的无限页面的示例: http : //tumbledry.org/
更新发现这个方法:
window.location.href = window.location.href + '#abc';
它似乎为我工作,但我在一个新的铬..这可能会导致一些问题与旧的浏览器?
如果你正在寻找哈希修改,你的解决scheme工作正常。 但是,如果您想更改查询,则可以使用pushState,如您所说。 这里是一个可以帮助你正确实施的例子。 我testing,它工作正常:
if (history.pushState) { var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?myNewUrlQuery=1'; window.history.pushState({path:newurl},'',newurl); }
它不会重新加载页面,但它只允许您更改URL查询。 您将无法更改协议或主机值。 当然,这需要能够处理HTML5历史API的现代浏览器。
了解更多信息:
http://diveintohtml5.info/history.html
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
我已经很成功地使用了下面的JavaScript库:
https://github.com/balupton/jquery-history
它支持HTML5历史loggingAPI以及旧版浏览器的回退方法(使用#)。
这个库本质上是`history.pushState'周围的一个polyfill。
那么历史API就是你正在寻找的。 如果您希望支持传统浏览器,那么在浏览器不提供历史loggingAPI的情况下,查找一个操作URL哈希标记的库。