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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:26 PM

onbeforeunload

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

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

onbeforeunload および onunload イベント

onbeforeunload の定義と使用法

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

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

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

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

注: 要素で 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 は、

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7520

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？ Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？ Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:17 PM

この記事では、ソースマップを使用して、元のコードにマッピングすることにより、Minified JavaScriptをデバッグする方法について説明します。ソースマップの有効化、ブレークポイントの設定、Chrome DevtoolsやWebpackなどのツールの使用について説明します。

Console.log出力の違い結果：なぜ2つの呼び出しが異なるのですか？ Apr 04, 2025 pm 05:12 PM

Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...

初心者向けのタイプスクリプト、パート2：基本データ型 Mar 19, 2025 am 09:10 AM

エントリーレベルのタイプスクリプトチュートリアルをマスターしたら、TypeScriptをサポートするIDEで独自のコードを作成し、JavaScriptにコンパイルできるはずです。このチュートリアルは、TypeScriptのさまざまなデータ型に飛び込みます。 JavaScriptには、NULL、未定義、ブール値、数字、文字列、シンボル（ES6によって導入）とオブジェクトの7つのデータ型があります。 TypeScriptはこれに基づいてより多くのタイプを定義し、このチュートリアルではすべてを詳細に説明します。ヌルデータ型 JavaScriptのように、Typescriptのnull

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック