在JS中添加一个URL参数而不改变页面

Question

最近我不得不在 JavaScript 中以编程方式添加一个 URL 参数。 要求是参数应更改但页面不应刷新。 这样做是为了在用户刷新页面时帮助保持浏览器状态。

我想如果将来有人遇到这个问题，我会分享我的解决方案。

Answer 1

我使用历史对象的replaceState ()函数来替换位置的urlParameter部分。 该功能在大多数新浏览器中可用。

/**
* Add url parameters to your current location without changing page
* @param { object } urlParams, a hash containing key value pairs
*/
function addUrlParams(urlParams){
  var oldState = history.state;
  var oldTitle= document.title;
  var oldParams= `${window.location.hash}${location.search}`; // Keep the old params      
  var newParams='';
  var paramKeys = Object.keys(urlParams);
  var paramValues = Object.values(urlParams)

  for(var i=0;i < paramKeys.length;i++){
    newParams += `&${paramKeys[i]}=${paramValues[i]}`; // Add each param from the hash
  }
  history.replaceState(oldState,oldTitle,oldParams+newParams)
}

希望你觉得它有用。