javascript - 「このページから移動してもよろしいですか？」を表示する方法変更がコミットされたのはいつですか？

Question

ここstackoverflowで、変更を加え始めたときにページから移動しようとすると、javascriptの確認ボタンが表示され、「このページから移動してもよろしいですか？」と尋ねられます。blee blah bloo .. ..

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

次のことを試しましたが、まだ機能しません。

<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>

誰かが例を投稿できますか？

score 426 · Accepted Answer

アップデート (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?";
});

score 20 · Accepted Answer

これを Chrome と Safari で機能させるには、次のようにする必要があります。

window.onbeforeunload = function(e) {
    return "Sure you want to leave?";
};

参考：https ://developer.mozilla.org/en/DOM/window.onbeforeunload

score 18 · Accepted Answer

JQueryを使用すると、この作業は非常に簡単に実行できます。セットにバインドできるので。

onbeforeunload を実行するだけでは十分ではありません。誰かが編集を開始した場合にのみ、ナビゲートをトリガーしたいと考えています。

score 14 · Accepted Answer

jquerys 'beforeunload' は私にとってはうまくいきました

$(window).bind('beforeunload', function(){
    if( $('input').val() !== '' ){
        return "It looks like you have input you haven't submitted."
    }
});

score 12 · Accepted Answer

シンプルなソリューションを探している新しい人は、Areyousure.jsを試してみてください。

score 11 · Accepted Answer

これは、フォームにデータが入力された場合にメッセージを表示し、フォームが送信された場合にメッセージを表示しない簡単な方法です。

$(function () {
    $("input, textarea, select").on("input change", function() {
        window.onbeforeunload = window.onbeforeunload || function (e) {
            return "You have unsaved changes.  Do you want to leave this page and lose your changes?";
        };
    });
    $("form").on("submit", function() {
        window.onbeforeunload = null;
    });
})

score 8 · Accepted Answer

キースのすでに驚くべき答えを拡張するには：

カスタム警告メッセージ

カスタム警告メッセージを許可するには、次のような関数でラップできます。

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

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

        // For Chrome, Safari, IE8+ and Opera 12+
        return message;
    };
    window.onbeforeunload = confirmOnPageExit;
}

次に、カスタムメッセージでその関数を呼び出します。

preventNavigation("Baby, please don't go!!!");

ナビゲーションを再度有効にする

ナビゲーションを再度有効にするには、に設定window.onbeforeunloadするだけnullです。これは、どこでも呼び出すことができるきちんとした小さな関数にラップされています。

function enableNavigation() {
    window.onbeforeunload = null;
}

jQuery を使用してこれをフォーム要素にバインドする

jQuery を使用している場合、これは次のようにフォームのすべての要素に簡単にバインドできます。

$("#yourForm :input").change(function() {
    preventNavigation("You have not saved the form. Any \
        changes will be lost if you leave this page.");
});

次に、フォームの送信を許可するには:

$("#yourForm").on("submit", function(event) {
    enableNavigation();
});

動的に変更されたフォーム:

preventNavigation()またenableNavigation()、フォームを動的に変更したり、AJAX 要求を送信するボタンをクリックしたりするなど、必要に応じて他の機能にバインドできます。非表示の入力要素をフォームに追加することでこれを行いました。

<input id="dummy_input" type="hidden" />

次に、ユーザーが離れないようにしたいときはいつでも、その入力で変更をトリガーして、それpreventNavigation()が実行されるようにします。

function somethingThatModifiesAFormDynamically() {

    // Do something that modifies a form

    // ...
    $("#dummy_input").trigger("change");
    // ...
}

score 3 · Accepted Answer

ここでこれを試してみてください。100％動作します

<html>
<body>
<script>
var warning = true;
window.onbeforeunload = function() {  
  if (warning) {  
    return "You have made changes on this page that you have not yet confirmed. If you navigate away from this page you will lose your unsaved changes";  
    }  
}

$('form').submit(function() {
   window.onbeforeunload = null;
});
</script>
</body>
</html>

score 3 · Accepted Answer

ユーザーがフォームに変更を加え始めると、ブール値のフラグが設定されます。その後、ユーザーがページから移動しようとすると、window.onunloadイベントでそのフラグを確認します。フラグが設定されている場合は、文字列として返すことでメッセージを表示します。メッセージを文字列として返すと、メッセージを含む確認ダイアログがポップアップ表示されます。

false変更をコミットするために ajax を使用している場合、変更がコミットされた後 (つまり ajax 成功イベント) にフラグを設定できます。

score 1 · Accepted Answer

ここに私のhtmlがあります

<!DOCTYPE HMTL>
<meta charset="UTF-8">
<html>
<head>
<title>Home</title>
<script type="text/javascript" src="script.js"></script>
</head>

 <body onload="myFunction()">
    <h1 id="belong">
        Welcome To My Home
    </h1>
    <p>
        <a id="replaceME" onclick="myFunction2(event)" href="https://www.ccis.edu">I am a student at Columbia College of Missouri.</a>
    </p>
</body>

そして、これは私がjavaScriptで似たようなことをした方法です

var myGlobalNameHolder ="";

function myFunction(){
var myString = prompt("Enter a name", "Name Goes Here");
    myGlobalNameHolder = myString;
    if (myString != null) {
        document.getElementById("replaceME").innerHTML =
        "Hello " + myString + ". Welcome to my site";

        document.getElementById("belong").innerHTML =
        "A place you belong";
    }   
}

// create a function to pass our event too
function myFunction2(event) {   
// variable to make our event short and sweet
var x=window.onbeforeunload;
// logic to make the confirm and alert boxes
if (confirm("Are you sure you want to leave my page?") == true) {
    x = alert("Thank you " + myGlobalNameHolder + " for visiting!");
}
}

score 1 · Accepted Answer

このスレッドのすべての回答に基づいて、次のコードを書きましたが、うまくいきました。

onunload イベントのチェックが必要な input/textarea タグがいくつかしかない場合は、HTML5 データ属性を次のように割り当てることができます。data-onunload="true"

たとえば。

<input type="text" data-onunload="true" />
<textarea data-onunload="true"></textarea>

Javascript (jQuery) は次のようになります。

$(document).ready(function(){
    window.onbeforeunload = function(e) {
        var returnFlag = false;
        $('textarea, input').each(function(){
            if($(this).attr('data-onunload') == 'true' && $(this).val() != '')
                returnFlag = true;
        });

        if(returnFlag)
            return "Sure you want to leave?";   
    };
});

score 1 · Accepted Answer

onchangeJS で変数を設定するテキストエリア (またはその他のフィールド) にイベントを追加できます。ユーザーがページ (window.onunload) を閉じようとすると、その変数の値を確認し、それに応じてアラートを表示します。

score 0 · Accepted Answer

使用したいのは JavaScript の onunload イベントです。

以下に例を示します: http://www.w3schools.com/jsref/event_onunload.asp

score -1 · Accepted Answer

body タグには「onunload」パラメータがあり、そこから JavaScript 関数を呼び出すことができます。false が返されると、移動できなくなります。

javascript - 「このページから移動してもよろしいですか？」を表示する方法 変更がコミットされたのはいつですか？

18 に答える 18