JavaScript を使用して URL パラメータを動的に変更するにはどうすればよいですか?

JavaScript による動的 URL パラメータ操作

JavaScript は、URL パラメータを変更および指定するための多彩な方法を提供し、開発者が Web ページを動的に制御できるようにします。この機能を実現する手法を見てみましょう。

既存のパラメータの変更

URL「site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc.」を考えてみましょう。 」 「rows」パラメータ値をたとえば 10 に変更するには、次の JavaScript コードを使用します。

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

updateURLParameter 関数は、元の URL、パラメータ名 (「rows」) の 3 つのパラメータを受け取ります。 、および新しい値 (10)。更新されたパラメータを使用して新しい URL を構築し、それを返します。

パラメータの追加

「rows」パラメータが存在しない場合は、それを同じ関数を使用して URL の末尾:

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

コードは最初に既存の 'rows' パラメータを更新しようとします (それは存在します）。存在しない場合は、URL に「&rows=10」が追加されます。

追加の考慮事項

ブラウザの履歴で状態を維持するには、次のようにします。 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("&");
    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 中国語 Web サイトの他の関連記事を参照してください。