ホームページ > ウェブフロントエンド > jsチュートリアル > 変更が保存されていないページから誤って移動してしまうことを防ぐにはどうすればよいですか?

変更が保存されていないページから誤って移動してしまうことを防ぐにはどうすればよいですか?

Susan Sarandon
リリース: 2024-12-12 14:20:10
オリジナル
910 人が閲覧しました

How to Prevent Accidental Navigation Away from a Page with Unsaved Changes?

「このページから移動してもよろしいですか?」を表示する方法変更がコミットされるタイミング

最新の Web 環境では、カスタム ナビゲーション プロンプトの表示はセキュリティ上の問題とみなされ、ブラウザはこの機能をサポートしなくなりました。代わりに、ブラウザーは一般的なメッセージのみを表示します。ナビゲーション プロンプトを有効または無効にするには、次のコードを使用するだけです:

// Enable navigation prompt
window.onbeforeunload = function() {
    return true;
};

// Remove navigation prompt
window.onbeforeunload = null;
ログイン後にコピー

レガシー ブラウザのサポート (非推奨)

古いブラウザとの互換性のためIE6 ~ 8 および Firefox 1 ~ 3.5 では、次のコードを使用してカスタム ナビゲーションを表示できます。プロンプト:

var confirmOnPageExit = function (e) {
    // Define the message to be displayed
    var message = 'Confirm your navigation away from the page';

    // Handle compatibility with older browsers
    if (e) {
        e.returnValue = message;
    }

    // Return the message
    return message;
};

// Enable the navigation prompt
window.onbeforeunload = confirmOnPageExit;

// Disable the navigation prompt
window.onbeforeunload = null;
ログイン後にコピー

jQuery などの検証フレームワークを使用するときに変更された値を確認するには、次のようなコードを使用できます:

$('input').change(function() {
    // Check if the input value is not empty
    if( $(this).val() != "" ) {
        // Enable the navigation prompt
        window.onbeforeunload = confirmOnPageExit;
    }
});
ログイン後にコピー

以上が変更が保存されていないページから誤って移動してしまうことを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート