JavaScript を共有して Web ページの開閉イベント_JavaScript スキルを取得する
Web 開発を行う場合、このブログ エディターのように、ページを閉じるイベント onbeforeunload をよく使用します。これにより、ユーザーに閉じるのを諦めるかどうかを選択する機会が与えられます。ユーザーが終了することを選択した場合、onunload イベントは自然にトリガーされますが、ユーザーがキャンセルを選択した場合、それを検出するにはどうすればよいでしょうか。
ページが onunloadcancel と呼ばれるキャンセル イベントを残すと仮定します。明らかに、このイベントは、ユーザーがダイアログの「キャンセル」ボタンを押した後に発生する必要があります。ただし、プロンプト ダイアログ ボックスを閉じるトリガー プロセスはそれほど単純ではありません。まずこのプロセスを確認してみましょう:
window.onbeforeunload = function()
{
return "本当に辞めますか?";
}
ユーザーがページを離れる準備ができたとき (閉じるボタンを押す、ページを更新するなど)、onbeforeunload イベントがトリガーされます。このイベントでページが閉じられないようにするかどうかをスクリプトで決定することはできません。この文字列は、閉じる選択ダイアログ ボックスに説明テキストとして表示されるだけです。ユーザーは閉じるか閉じないかを選択できます。 。しかし、どれを選択すればよいのか、私たちには知る由もありません。
しかし、この問題を注意深く分析すると、実際にはそうではありません。 ユーザーが実際にページを閉じることを選択した場合、実行中のコードはすべて消滅し、ユーザーがページに留まり続けると、onbeforeunload イベントを除いて何も起こらなかったかのように扱われます。したがって、onbeforeunload イベントでちょっとした工夫をして、数ミリ秒後に開始するタイマーをここに登録します。ページが実際に閉じられている場合、もちろんタイマーは無効になり、ページはまだ存在します。この本質的に非同期のインターフェイス対話イベントにはエラーはありません。
setTimeout を使用し、onunloadcancel の実行に 10 ミリ秒の遅延を与えます。ページが実際に閉じられた場合、タイマーは当然破棄されます。そうでない場合は続行されます。しかし、テスト中に FireFox に 2 つのバグが見つかりました:
閉じるボタンを押すと、onunloadcancel も実行され、ダイアログ ボックスが点滅する場合があります。 while(1); に変更すると、ブラウザはスタックしたままになります。つまり、onunloadcancel は実際に実行されますが、インターフェイスが破棄されるだけで、スクリプトの実行は一時停止されません。
ページを更新して離れるとonbeforeunloadは1回だけ実行されますが、×ボタンをクリックしてページを閉じるとonbeforeunloadが2回実行されます。したがって、FFと互換性を持たせるためにはまだ改善する必要があります。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7321
9
1625
14
1349
46
1261
25
1209
29
JavaScriptの文字列文字を交換します
Mar 11, 2025 am 12:07 AM
JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi
カスタムGoogle検索APIセットアップチュートリアル
Mar 04, 2025 am 01:06 AM
このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。 驚くほど簡単です！検索をyに制限することができます
例JSONファイルの例
Mar 03, 2025 am 12:35 AM
この記事シリーズは、2017年半ばに最新の情報と新鮮な例で書き直されました。 このJSONの例では、JSON形式を使用してファイルに単純な値を保存する方法について説明します。 キー価値ペア表記を使用して、あらゆる種類を保存できます
10 jQuery構文蛍光物
Mar 02, 2025 am 12:32 AM
コードプレゼンテーションを強化する：開発者向けの10個の構文蛍光物 ウェブサイトやブログでコードスニペットを共有することは、開発者にとって一般的な慣行です。 適切な構文ハイライターを選択すると、読みやすさと視覚的な魅力を大幅に改善できます。 t
独自のAjax Webアプリケーションを構築します
Mar 09, 2025 am 12:11 AM
それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました
8見事なjQueryページレイアウトプラグイン
Mar 06, 2025 am 12:48 AM
楽なWebページレイアウトのためにjQueryを活用する：8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。 この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます
＆＃x27; this＆＃x27; JavaScriptで？
Mar 04, 2025 am 01:15 AM
コアポイント これは通常、メソッドを「所有」するオブジェクトを指しますが、関数がどのように呼び出されるかに依存します。 現在のオブジェクトがない場合、これはグローバルオブジェクトを指します。 Webブラウザでは、ウィンドウで表されます。 関数を呼び出すと、これはグローバルオブジェクトを維持しますが、オブジェクトコンストラクターまたはそのメソッドを呼び出すとき、これはオブジェクトのインスタンスを指します。 call（）、apply（）、bind（）などのメソッドを使用して、このコンテキストを変更できます。これらのメソッドは、与えられたこの値とパラメーターを使用して関数を呼び出します。 JavaScriptは優れたプログラミング言語です。数年前、この文はそうでした
10 JavaScript＆JQuery MVCチュートリアル
Mar 02, 2025 am 01:16 AM
この記事では、JavaScriptとJQuery Model-View-Controller（MVC）フレームワークに関する10を超えるチュートリアルの厳選された選択を紹介します。これは、新年にWeb開発スキルを向上させるのに最適です。 これらのチュートリアルは、Foundatioのさまざまなトピックをカバーしています
