在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)
}

希望你覺得它有用。