「ページを離れる」を実装するにはどうすればよいですか?未保存の変更の確認?

「このページから移動してもよろしいですか?」の実装方法未保存の変更が存在する場合の確認

Web ページを閲覧する際、未保存の変更が行われたページから移動する前に確認プロンプトが表示される場合があります。この確認は、続行すると未保存の変更が失われることをユーザーに警告するために役立ちます。この記事では、この機能を実装する方法を検討し、さまざまな機能を持つブラウザーで直面する特定の課題に対処します。

1 つの方法には、window.onbeforeunload イベントを利用することが含まれます。従来、このイベントには文字列値を割り当ててカスタム確認メッセージを表示することができましたが、最新のブラウザではこれがセキュリティ上の問題であると考えられ、一般的なメッセージのみが表示されるようになりました。その結果、実装は次のように簡素化されました:

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

// Remove navigation prompt
window.onbeforeunload = null;

レガシー ブラウザのサポートには、より包括的なアプローチが必要です。 window.onbeforeunload イベントには関数参照を割り当てる必要があり、古いブラウザではイベントの returnValue プロパティを設定する必要があります。

var confirmOnPageExit = function (e) {
    // Get the event object
    e = e || window.event;

    // Set the return value to display the message
    if (e) {
        e.returnValue = 'Confirm exit? Unsaved changes will be lost.';
    }

    // Return the message for newer browsers
    return 'Confirm exit? Unsaved changes will be lost.';
};

確認プロンプトを切り替えるには、conformOnPageExit 関数を window に割り当てるだけです。 onbeforeunload で有効にし、関数を削除して無効にします:

// Turn it on
window.onbeforeunload = confirmOnPageExit;

// Turn it off
window.onbeforeunload = null;

未保存の変更を追跡するには、次のことが必要です。使用されている特定の検証フレームワークに依存する必要があります。たとえば、jQuery では、次のコード スニペットは、入力フィールドへの変更を監視し、確認プロンプトをトリガーする方法を示しています。

$('input').change(function() {
    if( $(this).val() != "" ) {
        window.onbeforeunload = confirmOnPageExit;
    }
});

以上が「ページを離れる」を実装するにはどうすればよいですか?未保存の変更の確認?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。