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

javascript jquery query-string dhtml

2022-08-30 01:56:17

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

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

我发现了这个很棒的帖子，并试图用，但这似乎对我不起作用。我不确定它是否理想，因为我并不真正关心修改浏览器历史记录。window.history.pushstate

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

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

更新发现此方法：

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

答案 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历史API的现代浏览器。

欲了解更多信息：

http://diveintohtml5.info/history.html

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

答案 2

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

// to remove the specific key
export function removeUrlParameter(paramKey) {
  const url = window.location.href
  console.log("url", url)
  var r = new URL(url)
  r.searchParams.delete(paramKey)
  const newUrl = r.href
  console.log("r.href", newUrl)
  window.history.pushState({ path: newUrl }, '', newUrl)
}