javascript TOPページであることを判定する

作成日 2022.09.22
javascript
javascript

javascriptで、TOPページであることを判定するサンプルコードを掲載してます。ブラウザはchromeを使用しています。

1. 環境
2. TOPページを判定
3. サンプルコード

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 105.0.5195.127

Javascript サンプル集はこちら

TOPページを判定

TOPページを判定するには、「location.pathname」を使用して「/」のみの場合はTOPと判定します。

if( location.pathname === '/' ){
    console.log('TOPページです'); 
}

ちなみに「location.pathname」は、例えば「URL」が「 https://mebee.info/test/test.html 」だった場合は、以下の値が返ります。

console.log(location.pathname); // /test/test.html

サンプルコード

以下は、ボタンをクリックすると現在いるページがTOPであるかを判定して結果を表示するだけのサンプルコードとなります。

※cssには「bootstrap material」を使用してます。関数はアロー関数を使用してます。

document.getElementByIdの省略して記述する

アロー関数の使い方

三項演算子を使ってif文を1行で書く

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>

<body>
  <div id="foo" class="container text-center w-25" style="margin-top:150px">

    <h2><span id="result" class="badge badge-success">実行結果</span></h2>

    <button id="btn" type="button" class="btn btn-success btn-rounded mt-1">
      実行
    </button>

  </div>

  <script>    

    btn.onclick = () => {
      
      result.textContent = (location.pathname === '/') ?  'TOPです' : 'TOPではありません';

    }
    
  </script>
</body>

</html>

判定されていることが確認できます。