Question

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

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

我找到this great post，并尝试使用window.history.pushstate来关注示例，但这似乎对我不起作用。而且我不确定它是否理想，因为我并不真正关心修改浏览器历史记录。

我只是希望能够为当前查看的照片添加书签，而无需在每次更改照片时重新加载页面。

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

UPDATE 找到了这种方法：

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

它似乎适合我，但我正在使用新的Chrome ..这可能会导致旧版浏览器出现问题？

Answer 1

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

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

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

了解更多信息：

http://diveintohtml5.info/history.html

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

Answer 2

我使用了以下JavaScript库并取得了巨大成功：

https://github.com/balupton/jquery-history

它支持HTML5历史记录API以及旧版浏览器的回退方法（使用＃）。

这个库本质上是一个围绕`history.pushState'的填充。

Answer 3

基于Fabio的答案，我创建了两个函数，这些函数可能对任何绊倒这个问题的人都有用。使用这两个函数，您可以使用键和值作为参数调用insertParam()。它将添加URL参数，或者，如果查询参数已存在且具有相同的密钥，则会将该参数更改为新值：

//function to remove query params form a url
function removeURLParameter(url, parameter) {
    //prefer to use l.search if you have a location/link object
    var urlparts= url.split('?');   
    if (urlparts.length>=2) {

        var prefix= encodeURIComponent(parameter)+'=';
        var pars= urlparts[1].split(/[&;]/g);

        //reverse iteration as may be destructive
        for (var i= pars.length; i-- > 0;) {    
            //idiom for string.startsWith
            if (pars[i].lastIndexOf(prefix, 0) !== -1) {  
                pars.splice(i, 1);
            }
        }

        url= urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : "");
        return url;
    } else {
        return url;
    }
}

function insertParam(key, value) {
    if (history.pushState) {
        // var newurl = window.location.protocol + "//" + window.location.host + search.pathname + '?myNewUrlQuery=1';
        var currentUrl = window.location.href;
        //remove any param for the same key
        var currentUrl = removeURLParameter(currentUrl, key);

        //figure out if we need to add the param with a ? or a &
        var queryStart;
        if(currentUrl.indexOf('?') !== -1){
            queryStart = '&';
        } else {
            queryStart = '?';
        }

        var newurl = currentUrl + queryStart + key + '=' + value
        window.history.pushState({path:newurl},'',newurl);
    }
}

Answer 4

由于每个回答这个问题的人似乎都忘记了哈希，我想添加我用来保留所有 URL 参数的代码：

const urlParams = new URLSearchParams(window.location.search);

/// Change some part of the URL params

if (history.pushState) {
  const newurl =
    window.location.protocol +
    "//" +
    window.location.host +
    window.location.pathname +
    "?" +
    urlParams.toString() +
    window.location.hash;
  window.history.replaceState({ path: newurl }, "", newurl);
} else {
  window.location.search = urlParams.toString();
}

Answer 5

然后历史API正是您正在寻找的。如果您也希望支持旧版浏览器，那么如果浏览器不提供历史记录API，那么请寻找一个可以回溯操作URL哈希标记的库。

Answer 6

我想改善Fabio的答案，并创建一个在不重新加载页面的情况下将自定义键添加到URL字符串的功能。

function insertUrlParam(key, value) {
    if (history.pushState) {
        let searchParams = new URLSearchParams(window.location.search);
        searchParams.set(key, value);
        let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + searchParams.toString();
        window.history.pushState({path: newurl}, '', newurl);
    }
}

Answer 7

我想我会在 Fabio 和 Aram 的回答中添加一些内容。我想我有时可能喜欢在 url 中保留哈希值。但通常不会，所以我将该参数设置为默认为 false。

replaceState 仍然没有在 Chrome 上设置页面标题。所以我添加了几行来更改标题（如果有的话）。

function insertUrlParam(key, value, title = '', preserve_hash = false) {
    if (history.pushState) {
        let searchParams = new URLSearchParams(window.location.search);
        searchParams.set(key, value);
        let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname
            + '?' + searchParams.toString();
        if(preserve_hash) newurl = newurl + window.location.hash;
        let oldTitle = document.title;
        if(title !== '') {
            window.history.replaceState({path: newurl}, title, newurl);
            if(document.title !== title) { // fallback if above doesn't work
                document.title = title;
            }
        } else { // in case browsers ever clear titles set with empty string
            window.history.replaceState({path: newurl}, oldTitle, newurl);
        }
    }
}

Answer 8

如果我们只是想更新查询参数而不触及 URL 的其他部分，则无需再次构建 URL。这是我使用的：

const addQueryParam = (key, value) => {
  const url = new URL(window.location.href);
  url.searchParams.set(key, value);
  window.history.pushState({}, '', url.toString());
};

const getQueryParam = (key) => {
  const url = new URL(window.location.href);
  return url.searchParams.get(key) || '';
};

修改查询字符串而不重新加载页面

8 个答案: