如何使用JavaScript動態修改URL參數？-js教程-PHP中文網

如何使用JavaScript動態修改URL參數？

Patricia Arquette

發布： 2024-11-09 06:22:02

原創

1005 人瀏覽過

How to dynamically modify URL parameters using JavaScript?

使用JavaScript 進行動態URL 參數操作

JavaScript 提供了多種修改和指定URL 參數的方法，使開發人員能夠動態控制網頁。讓我們探索實現此功能的技術。

更改現有參數

考慮URL“site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=Modifiedarchiveid=5000&columns=5&rows=20&sorting=Modifiedarchiveid=5000&columns=5&rows=20&sorting=Modifiedarchiveid=5000&columns=5&rows=20&sorting=ModifiedMusc.為10，我們可以使用以下JavaScript 程式碼：

var newURL = updateURLParameter(window.location.href, 'rows', 10);

登入後複製

updateURLParameter 函數採用三個參數：原始URL、參數名稱（'rows'），以及新值(10)。它使用更新後的參數建構一個新的 URL 並傳回它。

新增參數

如果'rows' 參數不存在，我們可以將其加到使用相同函數的URL 結尾：

var newURL = updateURLParameter(window.location.href, 'rows', 10) || window.location.href + '&rows=10';

登入後複製

程式碼首先嘗試更新現有的“rows”參數（如果存在）。如果不存在，則會將「&rows=10」附加到 URL。

其他注意事項

要維護瀏覽器歷史記錄中的狀態，您可以使用ReplaceState 函數：

window.history.replaceState('', '', updateURLParameter(window.location.href, "param", "value"));

登入後複製

上面更新了瀏覽器網址列中的URL，同時保留歷史記錄。

高階處理

支援具有錨點的URL（例如「#mytarget」），程式碼的擴充版本會單獨處理錨點：

function updateURLParameter(url, param, paramVal) {
  // Handle anchors
  var newAdditionalURL = "";
  var tempArray = url.split("?");
  var baseURL = tempArray[0];
  var additionalURL = tempArray[1];
  var temp = "";
  if (additionalURL) {
    var tmpAnchor = additionalURL.split("#");
    var TheParams = tmpAnchor[0];
    var TheAnchor = tmpAnchor[1];
    if (TheAnchor) additionalURL = TheParams;
    tempArray = additionalURL.split("&amp;");
    for (var i = 0; i < tempArray.length; i++) {
      if (tempArray[i].split("=")[0] != param) {
        newAdditionalURL += temp + tempArray[i];
        temp = "&amp;";
      }
    }
  }

  // Update/add parameter
  if (TheAnchor) paramVal += "#" + TheAnchor;
  var rows_txt = temp + "" + param + "=" + paramVal;
  return baseURL + "?" + newAdditionalURL + rows_txt;
}

登入後複製

這可確保修改URL 參數時正確維護錨點。

以上是如何使用JavaScript動態修改URL參數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！