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

【HTML】ユーザーがページから離脱するときにスクリプトを実行する方法（onpagehideイベント）

onpagehideイベントとは

ユーザーがあるページから別のページへ移動したタイミングでスクリプトを実行したい場合は、HTMLの onpagehide イベントを使用します。このイベントは、ユーザーがリンクをクリックして別ページへ遷移したり、ブラウザのタブやウィンドウを閉じたり、フォームを送信したりといった「ページを離れる操作」が行われたときに発生します。

HTML属性として記述する方法

HTML要素の属性として直接指定する場合は、次のように記述します。

<p onpagehide="myScript">

このように書くことで、そのページが非表示になるときに myScript で指定した処理が実行されます。

JavaScriptから設定する方法

HTML側に属性を書かずに、JavaScriptでイベントハンドラを登録することもできます。その場合は onpagehide プロパティに関数を代入します。

object.onpagehide = function(){ // ここに実行したいスクリプト };

たとえば、ユーザーがページを離れる直前にデータの保存やログの送信などを行いたい場合に、onpagehideイベントは便利です。ページ遷移のたびに確実に後処理を実行したいケースで活用してみてください。

  1. ユーザーがHTML要素にテキストを貼り付けたときにスクリプトを実行する方法（onpaste属性）

    HTMLでは、ユーザーが要素にテキストを貼り付けた瞬間に onpaste 属性（イベントハンドラ）がトリガーされます。この属性を活用することで、貼り付け操作を検知し、任意のJavaScript関数を実行することができます。onpaste属性の基本的な使い方以下のコードは、テキスト入力欄に何かを貼り付けたときに display() 関数を呼び出すシンプルな例です。実際にブラウザで動作させて確認してみてください。<!DOCTYPE html> <html>    <body>       <input ty

  2. 【HTML】ユーザーがページに移動したときにスクリプトを実行する方法｜onpageshow属性の使い方

    ユーザーがページに移動した際にスクリプトを実行したい場合は、onpageshow属性を使用します。onpageshow属性とはonpageshow属性は、ページが表示されたときに発生する「onpageshowイベント」に対応してスクリプトを実行するための属性です。このイベントは、ページが最初に読み込まれたときだけでなく、別のページから戻ってきた場合（キャッシュからページが復元された場合）にも発生します。一般的なonloadイベントはキャッシュからページが表示される際には発火しませんが、onpageshowイベントはそのようなケースでも必ず実行されるという特徴があります。そのため、「戻る」ボタン