修改查询字符串而不重新加载页面 [英] Modifying a query string without reloading the page

问题描述

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

I am creating a photo gallery, and would like to be able to change the query string and title when the photos are browsed.

我正在寻找的行为通常可以看到连续/无限页面的一些实现，其中向下滚动查询字符串时不断增加页码（ http ：//x.com？page = 4 ）等。这在理论上应该很简单，但我希望在主流浏览器中安全。

The behavior I am looking for is often seen with some implementations of continuous/infinite page, where while you scroll down the query string keeps incrementing the page number (http://x.com?page=4) etc.. This should be simple in theory, but I would like something that is safe across major browsers.

我找到了这篇精彩的帖子，并试图关注使用 window.history.pushstate 的示例，但这似乎对我不起作用。而且我不确定它是否理想，因为我并不真正关心修改浏览器历史记录。

I found this great post, and was trying to follow the example with window.history.pushstate, but that doesn't seem to be working for me. And I'm not sure if it is ideal because I don't really care about modifying the browser history.

我只是希望能够提供书签功能当前查看的照片，每次更改照片时都不会重新加载页面。

I just want to be able to offer the ability to bookmark the currently viewed photo, without reloading the page every time the photo is changed.

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

Here is an example of infinite page that modifies query string: http://tumbledry.org/

UPDATE 发现了这个方法：

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

它似乎适用于我，但我使用新的镀铬..这可能会导致一些旧浏览器的问题？

it appears to work for me, but i am on a new chrome.. it would probably cause some issues with older browsers?

推荐答案

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

If you are looking for Hash modification, your solution works ok. However, if you want to change the query, you can use the pushState, as you said. Here it is an example that might help you to implement it properly. I tested and it worked fine:

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的现代浏览器。

It does not reload the page, but it only allows you to change the URL query. You would not be able to change the protocol or the host values. And of course that it requires modern browsers that can process HTML5 History API.

有关更多信息：

< a href =http://diveintohtml5.info/history.html =noreferrer> http://diveintohtml5.info/history.html

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

这篇关于修改查询字符串而不重新加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！