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

HTMLでページ履歴が変更されたときにスクリプトを実行する方法（onpopstateイベント）

ブラウザのセッション履歴に変化があったとき、popstateイベントが発生します。ユーザーが「戻る」・「進む」ボタンを押した場合や、history.back()・history.forward()・history.go()が呼び出された場合などに、このイベントを利用して任意のスクリプトを実行できます。

onpopstate属性を使った基本的な例

<body>要素にonpopstate属性を指定すると、履歴が変更されるたびに関数が呼び出されます。

<!DOCTYPE html>
<html>
  <body onpopstate = "onpopstateFunction()">

    <p>これはデモ用のテキストです</p>

  </body>
</html>

addEventListener()を使う方法

より柔軟にイベントを扱いたい場合は、JavaScript側でaddEventListener()を使用するのが一般的です。

window.addEventListener("popstate", function(event) {
  console.log("履歴が変更されました", event.state);
});

注意点

  • history.pushState()やhistory.replaceState()を呼び出しても、popstateイベントは発生しません。このイベントは実際に履歴エントリ間を移動したときにのみ発火します。
  • イベントオブジェクトのstateプロパティから、その履歴エントリに関連付けられた状態オブジェクトを取得できます。
  1. HTMLで要素がフォーカスを取得したときにスクリプトを実行する方法

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

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

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