HTMLのonhashchangeイベント属性とは？使い方とサンプルコードを解説

HTMLのonhashchangeイベント属性は、URLのアンカー部分（「#」以降のハッシュ部分）が変更されたときに発生するイベントです。ページ全体を再読み込みすることなく、URLのハッシュ値の変化を検知してスクリプトを実行できるため、シングルページアプリケーション（SPA）などでも幅広く活用されています。

構文

onhashchangeイベント属性の基本的な構文は以下のとおりです。

<tagname onhashchange="script"></tagname>

それでは、HTMLのonhashchangeイベント属性の具体的な使用例を見ていきましょう。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #FBAB7E;
        background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
        text-align: center;
    }
    .btn {
        background: #db133a;
        border: none;
        color: #fff;
        height: 2rem;
        padding: 8px 10px;
    }
</style>
</head>
<body onhashchange="hashChange()">
<h1>HTML onhashchangeイベント属性 デモ</h1>
<button class="btn" onclick="change()">ハッシュを設定</button>
<p class="msg"></p>
<script>
    function change() {
        location.hash = "newHashPart";
        document.querySelector('.msg').innerHTML = 'URLのハッシュ部分: ' + location.hash;
    }
    function hashChange() {
        document.body.style.background = 'lightblue';
    }
</script>
</body>
</html>

実行結果

「ハッシュを設定」ボタンをクリックすると、現在のURLに新しいハッシュ（newHashPart）が設定されます。このとき、onhashchangeイベント属性がどのように動作するかを観察してみてください。ハッシュが変更されると、イベントが発火してページの背景色が水色に変化します。

補足：onhashchangeイベントのポイント

• onhashchangeイベントは、location.hash の値が変化したときにのみ発生します。
• 主に <body> 要素や window オブジェクトに対して設定して使用します。
• Chrome、Firefox、Safari、Edgeなど、主要なブラウザすべてでサポートされているため、安心して利用できます。
• ハッシュの変更によるページ遷移では再読み込みが発生しないため、履歴管理や画面切り替えの実装に便利です。