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

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

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

我找到了这篇不错的文章，并尝试使用跟随该示例window.history.pushstate，但这似乎对我没有用。而且我不确定它是否理想，因为我不太在乎修改浏览器的历史记录。

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

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

UPDATE找到此方法：

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

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

如果您正在寻找哈希修改，您的解决方案就可以了。但是，如果您想更改查询，则可以使用您所说的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/zh-CN/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

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

//function to remove query params from a URL
function removeURLParameter(url, parameter) {
    //better 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 to add/update query params
function insertParam(key, value) {
    if (history.pushState) {
        // var newurl = window.location.protocol + "//" + window.location.host + search.pathname + '?myNewUrlQuery=1';
        var currentUrlWithOutHash = window.location.origin + window.location.pathname + window.location.search;
        var hash = window.location.hash
        //remove any param for the same key
        var currentUrlWithOutHash = removeURLParameter(currentUrlWithOutHash, key);

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

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

我成功使用了以下JavaScript库：

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

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

这个库本质上是围绕“ history.pushState”的一个polyfill。

我想改善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);
    }
}

那么历史API正是您要寻找的。如果您也希望支持旧版浏览器，那么如果浏览器不提供历史记录API，则寻找一个可以处理URL的hash标签的库。