ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript の onbeforeunload および onunload イベントについての簡単な説明_基礎知識

JavaScript の onbeforeunload および onunload イベントについての簡単な説明_基礎知識

WBOY
WBOYオリジナル
2016-05-16 15:26:221209ブラウズ

最近のプロジェクトでは、ユーザーがページを離れるときにページのコンテンツの一部をキャッシュする必要がありますが、ユーザーが更新するときにのみキャッシュする必要があります。ユーザーが退出する時間

この関数を実行します。 Baidu によると、イベントには onbeforeunload と onunload の 2 つがありますが、onbeforeunload はユーザーが更新したときにも実行されます。かなり時間がかかったので、ここで簡単にまとめたいと思います

onbeforeunload および onunload イベント

onbeforeunload の定義と使用法

onbeforeunload イベントは、現在のページが終了しようとしている (更新または閉じられる) ときにトリガーされます。

このイベントは、ページの閲覧を続けるか現在のページから離れるかをユーザーに尋ねるダイアログ ボックスをポップアップするために使用できます。

ダイアログ ボックスのデフォルトのプロンプト メッセージはブラウザによって異なります。標準のメッセージは「このページを閉じてもよろしいですか?」に似ています。この情報は削除できません。

ただし、一部のメッセージ プロンプトをカスタマイズして、標準情報とともにダイアログ ボックスに表示することができます。

注: 6c04bd5ca3fcae76e30b72ad730ca86d 要素で onbeforeunload イベントを指定しない場合は、window オブジェクトにイベントを追加し、returnValue 属性を使用してカスタム情報を作成する必要があります (次の構文例を参照)。

注: Firefox ブラウザでは、デフォルトのリマインダー情報のみが表示されます (カスタマイズされた情報は表示されません)。

使用方法:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body onbeforeunload="return test()">
   
</body>
<script type="text/javascript">
  function test(){
    return "你确定要离开吗";
  }
</script>
</html>

または:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
   
</body>
<script type="text/javascript">
window.onbeforeunload=function(){
  return "你确定要离开吗";
}
 
</script>
</html>

イベントがトリガーされると、確認とキャンセルを示すダイアログ ボックスが表示されます。確認するとページを離れ、キャンセルするとこのページに留まり続けます。もちろん、プロンプトのテキストをカスタマイズすることもできます。

では、この関数を終了時にのみ実行する必要があり、更新時には実行する必要がない場合はどうすればよいでしょうか?

window.onbeforeunload = function() {
 
    var n = window.event.screenX - window.screenLeft;
 
    var b = n > document.documentElement.scrollWidth - 20;
 
    if (!(b && window.event.clientY < 0 || window.event.altKey)) {
      //window.event.returnValue = "真的要刷新页面么?";
      
      //这里放置我想执行缓存的代码
      cacheFunction();
      
    }
 }

この方法では、ページを離れるときにプロンプ​​ト ボックスを表示せずにキャッシュ コードを実行できます。更新してもプロンプト ボックスは表示されず、実行されません。現時点では、ajax を同期に設定する必要があることに注意してください。つまり、ajax の async を false に変更する必要があります。

ブラウザの互換性

IE、Chrome、Safari を完全にサポート

Firefox はテキスト リマインダー メッセージをサポートしていません

Opera は をサポートしていません

onbeforeunload の使用時に IE6 および IE7 で発生するバグ

2. Onunload の定義と使用法

onunload イベントは、ユーザーがページを終了すると発生します。

使用法は onbeforeunload と同様です

window.onunload = function(){
  return "你确定要离开吗"
}
 

ブラウザの互換性

IE6、IE7、IE8 では、ページを更新し、ブラウザを閉じ、ページにジャンプした後に実行されます。 IE9 はページの更新を実行しますが、ページのジャンプとブラウザの終了は実行されません。

firefox (firefox3.6 を含む) は、タグを閉じた後、ページジャンプ後、ページを更新した後に実行できますが、 を閉じた後は実行できません。

Safari はページの更新とページジャンプ後に実行されますが、ブラウザを閉じると実行されません。

Opera と Chrome はいかなる状況でも実行されません。

概要

onunload と onbeforeunload は、3f1c4e4b6b16bbbd69b2ee476dc4f83a スクリプトの window.onunload で指定するか、6c04bd5ca3fcae76e30b72ad730ca86d で指定することができます。違いは、onbeforeunload は onunload の前に実行され、onunload の実行を妨げることもできることです。

Onbeforeunload は、ページが更新されるか閉じられるときにも呼び出されます。onbeforeunload は、サーバーにアクセスして新しいページを読み取るときに呼び出されますが、onunload がサーバーからロードする必要がある新しいページを読み取っている間はまだ読み取りが開始されていません。現在のページが削除されるときに呼び出されます。 onunload では、ページの更新と閉じを防ぐことはできません。そして onbeforeunload でそれが可能です。 Onload はページの読み込み時にのみ実行されます

ページが閉じられると、最初に onbeforeunload が実行され、最後に onunload

が実行されます。 ページが更新されると、最初に onbeforeunload が実行され、次に onunload、最後に onload が実行されます。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。