BinaryDevelop
  1. ホーム
  2. ジャバスクリプト

[解決済み] [Solved] 変更がコミットされたときに "Are you sure you want to navigate away from this page?" を表示する方法は？

2022-03-30 23:46:37

質問

stackoverflowでは、変更を加えてからページから移動しようとすると、javascriptの確認ボタンが表示され、「本当にこのページから移動しますか」と尋ねられます。

どなたか実装されたことのある方、変更がコミットされたことをどのように追跡すればよいでしょうか？ 私は自分自身でこれを行うことができると信じて、私は専門家のあなたから良い慣行を学びたいと考えています。

以下を試しましたが、まだうまくいきません。 

<html>
<body>
    <p>Close the page to trigger the onunload event.</p>
    <script type="text/javascript">
        var changes = false;        
        window.onbeforeunload = function() {
            if (changes)
            {
                var message = "Are you sure you want to navigate away from this page?\n\nYou have started writing or editing a post.\n\nPress OK to continue or Cancel to stay on the current page.";
                if (confirm(message)) return true;
                else return false;
            }
        }
    </script>

    <input type='text' onchange='changes=true;'> </input>
</body>
</html>

どなたか例を載せていただけませんか？

どのように解決するのですか？

アップデート（2017年）

最近のブラウザは、カスタムメッセージの表示をセキュリティ上の危険と見なすようになり、そのため、現在では 削除 をすべて削除しました。現在では、ブラウザは一般的なメッセージしか表示しません。メッセージの設定に悩む必要がなくなったので、以下のようにシンプルになりました。 

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

レガシーブラウザへの対応については、以下をお読みください。

更新情報（2013年）

オリジナルの回答はIE6-8とFX1-3.5（これが書かれた2009年当時のターゲットでした）に適していますが、現在はかなり古く、現在のブラウザのほとんどで動作しません - 参考までに以下に残しておきます。

その window.onbeforeunload は、すべてのブラウザで一貫して扱われているわけではありません。文字列ではなく関数参照にすべきですが（元の回答通り）、古いブラウザでは、ほとんどのブラウザのチェックは、何かが onbeforeunload (を返す関数を含む）。 null ).

を設定します。 window.onbeforeunload を関数参照に設定する必要がありますが、古いブラウザの場合は returnValue を返すだけでなく、イベントの 

var confirmOnPageExit = function (e) 
{
    // If we haven't been passed the event get the window.event
    e = e || window.event;

    var message = 'Any text will block the navigation and display a prompt';

    // For IE6-8 and Firefox prior to version 4
    if (e) 
    {
        e.returnValue = message;
    }

    // For Chrome, Safari, IE8+ and Opera 12+
    return message;
};

を持つことはできません。 confirmOnPageExit を実行し、メッセージなしでユーザーを続行させたい場合は null を返します。確実にオン・オフを切り替えるには、やはりイベントを削除する必要があります。 

// Turn it on - assign the function that returns the string
window.onbeforeunload = confirmOnPageExit;

// Turn it off - remove the function entirely
window.onbeforeunload = null;

オリジナルの回答（2009年作業）

オンにするには 

window.onbeforeunload = "Are you sure you want to leave?";

オフにするには 

window.onbeforeunload = null;

これは通常のイベントではないので、標準的な方法でバインドすることができないことに注意してください。

値をチェックするため？それはあなたのバリデーションフレームワークに依存します。

jQueryでは、次のようなものになります（非常に基本的な例です）。 

$('input').change(function() {
    if( $(this).val() != "" )
        window.onbeforeunload = "Are you sure you want to leave?";
});

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します