HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでURLのアンカー部分（ハッシュ）が変更されたときにスクリプトを実行する方法

HTMLでは、onhashchange属性を使用することで、URLのアンカー部分（#以降のハッシュ値）が変更されたタイミングでスクリプトを実行できます。

このイベントは、ユーザーがページ内リンクをクリックしたときや、JavaScriptでlocation.hashの値を書き換えたときなどに発生します。シングルページアプリケーション（SPA）などで、ページを再読み込みせずに状態の変化を検知したい場合に便利です。

onhashchange属性の基本的な使い方

以下のコードは、onhashchange属性を使ってアンカー部分の変更を検出するシンプルな例です。ボタンをクリックするとハッシュ値が「part2」に変更され、その結果アラートが表示されます。

<!DOCTYPE html>
<html>
    <body onhashchange = "display()">
        <p>アンカー部分を変更します</p>
        <button onclick = "change()">変更</button>
        <p id = "test"></p>
        <script>
            function change() {
                location.hash = "part2";
                var a = "現在のアンカー部分: " + location.hash;
                document.getElementById("test").innerHTML = a;
            }
            function display() {
                alert("アンカー部分が変更されました！");
            }
        </script>
    </body>
</html>

コードの解説

  • onhashchange属性：body要素に設定されており、URLのハッシュが変わるとdisplay()関数が呼び出されます。
  • change()関数：location.hashに「part2」を代入してハッシュを変更し、現在のハッシュ値を画面に表示します。
  • display()関数：ハッシュの変更を検知して、アラートダイアログを表示します。

補足ポイント

  • onhashchangeイベントは、Internet Explorer 8以降を含む主要なモダンブラウザすべてでサポートされています。
  • HTML内の属性として記述する方法以外にも、JavaScriptでwindow.addEventListener("hashchange", 関数名)と記述してイベントリスナーを登録することも可能です。
  • ハッシュの変更はページの再読み込みを伴わないため、履歴管理（history API）と組み合わせるとより柔軟な画面遷移制御が実現できます。
  1. HTMLで要素がフォーカスを取得したときにスクリプトを実行する方法

    HTMLでは、onfocus属性を使用することで、要素がフォーカスを取得した瞬間にJavaScriptを実行できます。 onfocus属性とは onfocus属性は、テキスト入力欄やボタンなどのフォーム要素がユーザーによって選択され（フォーカスされ）、入力可能な状態になったときに、指定したスクリプト（関数）を呼び出すイベントハンドラです。 主な活用シーンとしては、以下のようなものが挙げられます。 入力欄がフォーカスされたときに背景色を変えて、現在どの項目を編集中か視覚的に強調する 入力欄のプレースホルダーやヒントテキストを表示する バリデーションメッセージやガイダンスを動的に切り替える 実

  2. HTMLのonratechange属性で再生速度が変わるたびにスクリプトを実行する方法

    HTMLでは、onratechange属性を使用することで、動画や音声の再生速度が変更されるたびに指定したJavaScriptのスクリプトを実行できます。この属性は、ユーザーが再生速度を変更した瞬間を検知したい場合に非常に便利です。onratechange属性の基本的な使い方onratechange属性は、<video>要素や<audio>要素に設定でき、playbackRateプロパティの値が変化したタイミングでイベントが発生します。以下のコード例では、スライダー（レンジ入力）で動画の再生速度を変更すると、その都度現在の再生速度が画面に表示される仕組みを実装しています