スキルアップを始める!

【JavaScript】パラメーターを保持したままリダイレクトする

JavaScript(ジャバスクリプト)
JavaScript(ジャバスクリプト)
この記事は約3分で読めます。

※記事中に広告情報を含みます。

\ワードプレスのスキルアップはこちら!/ WordPress入門読本

特定のパラメーターを保持したままリダイレクトするために、JavaScriptを使用する方法は以下の通りです。

このコードは、ブラウザの現在のURLからパラメーターを取得し、指定のパラメーターが存在する場合、新しいURLを構築し、そのパラメーターを保持したままリダイレクトします。

現在のURLからパラメーターを取得

// 現在のURLからパラメーターを取得
const urlParams = new URLSearchParams(window.location.search);
const yourParameter = urlParams.get('your_parameter');

if (yourParameter !== null) {
  // パラメーターが存在する場合、新しいURLを構築してリダイレクト
  const newURL = `/new_page?your_parameter=${yourParameter}`;
  window.location.href = newURL;
}

JavaScriptを使用して、この操作をブラウザ上で実行できます。

URLSearchParamsとは?

URLSearchParams は、WebのJavaScript環境で使用されるオブジェクトであり、URLのクエリパラメータを扱うためのものです。クエリパラメータは、URLの末尾に追加されるキーと値のペアで構成され、通常は ? の後に続きます。

[rml_read_more]

https://example.com/search?q=javascript&page=1

具体的な例

指定したパラメーター(ここでは”id”)を保持しながら、JavaScriptを使用してリダイレクトする具体的な例を示します。

例として、以下のような現在のURLがあるとします。

http://example.com/page?your_parameter=123&id=456

このURLから”id”パラメーターを取得し、新しいURLにそのパラメーターを保持したままリダイレクトします。

// 現在のURLからパラメーターを取得
const urlParams = new URLSearchParams(window.location.search);
const idParameter = urlParams.get('id');

if (idParameter !== null) {
  // パラメーターが存在する場合、新しいURLを構築してリダイレクト
  const newURL = `/new_page?id=${idParameter}`;
  window.location.href = newURL;
}

このコードは、現在のURLから”id”パラメーターを取得し、それを新しいURLに含めてリダイレクトします。上記の例では、新しいURLは次のようになります。

http://example.com/new_page?id=456

まとめ

このようにして、特定のパラメーター(”id”)を保持しながらリダイレクトできます。

ご参考ください。

URLをコピーしました!