【JavaScript】URLを取得してページごとに条件分岐させる

  • 投稿日
  • 更新日
  • 著者 NKMR
  • カテゴリー JavaScript

案件でページ毎にJavaScriptを適用したい場面がけっこうあるので、そんなときに使える『ページURLを取得して条件分岐させる方法』のメモ。

URLを取得する例文

window.onload = ()=> {
  // URLの取得
  let url = location.href;
  if (url == "http://hoge.com/") {
    // URLが http://hoge.com/ の場合に実行する処理 
  } 
}

変数に location オブジェクトで取得した URL を代入し、if 文を使って変数とURLが一致した場合にのみ処理を実行します。

location オブジェクト についてはこちらの記事をご参照ください↓

【JavaScript】location オブジェクトでURLやパスを取得する
location オブジェクトとは、URLからパラメータを取得したり、指定したアドレスに移動したりする時に使う…
clicklyquickly.com

また、トップページ以下の特定の下層ページにだけ処理を実行したい場合、location オブジェクトのpathname プロパティでパスを取得し、それによって上記の例文同様に条件分岐させることもできます↓

window.onload = ()=> {
  // パスの取得
  let path = location.pathname
  if (path == "/hoge/hoge.html") {
    // ドメイン以下のパス名が /hoge/hoge.html の場合に実行する処理
  } 
}
TIPS