スキルアップを始める!

【JavaScript】現在のページのパラメータを取得して条件でリダイレクトするかどうか切り分ける

WordPress(ワードプレス)
WordPress(ワードプレス)
この記事は約3分で読めます。

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

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

パラメータを取得する(URLSearchParams):params.get

以下のようなコードで、現在のページのURLからパラメータを取得し、条件に応じてリダイレクトするかどうかを切り分けることができます。

// 現在のURLからパラメータを取得する
const params = new URLSearchParams(window.location.search);

// パラメータ名が "redirect" で、値が "true" の場合にリダイレクトする
if (params.get("redirect") === "true") {
  window.location.href = "http://example.com/redirected-page";
} else {
  // リダイレクトしない場合の処理をここに書く
}

このコードでは、window.location.search で現在のURLのクエリストリングを取得しています。それを URLSearchParams オブジェクトに変換し、get メソッドを使ってパラメータの値を取得しています。

そして、取得した値が “true” であれば、window.location.href を使ってリダイレクト先のURLに遷移します。そうでなければ、リダイレクトしない場合の処理を行います。

https://contact.eguweb.tech/569/?redirect=false
https://contact.eguweb.tech/569/?redirect=true

リダイレクトされるかどうか?を、パラメータで条件を分ることで、挙動を変えることができました。

?redirect=trueの場合のみ、リダイレクトされます。

[rml_read_more]

パラメータそのものが設定されているかどうか?を分けるには:params.has

以下のようなコードで、現在のページにパラメータが設定されているかどうかを判定し、条件分岐することができます。

// 現在のURLからパラメータを取得する
const params = new URLSearchParams(window.location.search);

// パラメータが設定されている場合に処理を行う
if (params.has("paramName")) {
  // パラメータが設定されている場合の処理をここに書く
} else {
  // パラメータが設定されていない場合の処理をここに書く
}

このコードでは、has メソッドを使って、指定したパラメータが存在するかどうかを判定しています。もし指定したパラメータが存在すれば、if 文の中の処理が実行されます。パラメータが存在しない場合は、else 文の中の処理が実行されます。

ここで paramName は、実際のパラメータ名に置き換えてください。また、パラメータ名が複数ある場合には、複数回の has メソッドの呼び出しや、Array.includes メソッドを使って判定することもできます。

まとめ

URLをコピーしました!