ホームページ >ウェブフロントエンド >jsチュートリアル >ユーザーが別の場所に移動したときに、Web ページで保存されていないデータの損失を防ぐにはどうすればよいでしょうか?

ユーザーが別の場所に移動したときに、Web ページで保存されていないデータの損失を防ぐにはどうすればよいでしょうか?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-11-19 01:24:02812ブラウズ

How Can Web Pages Prevent Unsaved Data Loss When Users Navigate Away?

変更が保存されていない状態で Web ページを離れる前にユーザーに警告する

問題:

データの整合性を確保するには、Web ページが変更を保存しないようにするにはどうすればよいですか?ユーザーが未保存のフォームを破棄するかどうかを確認せずにブラウザのタブを閉じたり移動したりすることができないようにするデータ?

答え:

この機能を実現するには、次のテクニックを活用します:

短いが間違ったアプローチ:

「beforeunload」イベントのイベント リスナーを実装し、プロンプトを表示するには、null 以外の文字列を使用します。ただし、この方法ではフォームの送信と実際のナビゲーションを区別できず、不要なプロンプトが表示されます。

長くても正しいアプローチ:

上記のアプローチの欠点に対処するには:

  1. 「beforeunload」イベントと組み合わせて「ダーティ フラグ」を使用します。 「ダーティ」フラグはフォームへの変更を追跡し、必要な場合にのみプロンプトをトリガーします。
  2. フォームの変更を効果的に検出するには、jquery.dirty や jQuery の Are You Sure? などのサードパーティ ライブラリの使用を検討してください。プラグイン。これらのライブラリは、フォームの変更を監視し、プロンプトを表示するための信頼できる方法を提供します。

警告:

最新のブラウザ (Firefox や Chrome など) はサポートされなくなっていることに注意してください。ナビゲーション確認ダイアログでカスタム メッセージをサポートします。これは、「行った変更は保存されない可能性があります。」などの一般的なメッセージがユーザーに表示されることを意味します。

以上がユーザーが別の場所に移動したときに、Web ページで保存されていないデータの損失を防ぐにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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