どのように"Are you sure you wantへのナビゲートからこのページでは?"とい変化に努?

https://stackoverflow.com/questions/1119289

12-09-2019
|

質問

ここstackoverflowた場合、また変化しないようにナビゲートから離れたページでは、javascriptを確認ボタンに表示され、問:"Are you sure you wantへのナビゲートからこのページに表示すべき事は何か？"blee blahブロ...

で実施する前に、どうやってトラックに変化する犯?と思っていない自分自身、私を学習しようとしているのからだの専門家です。

また、以下のものが動作しない:

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

最近のブラウザは現在、セキュリティ上の危険をするカスタムメッセージを表示検討し、それゆえ<のhref = "https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#てきましたそれらのすべてからを削除Browser_compatibility」のrel = "noreferrer">。ブラウザは、今だけの一般的なメッセージを表示します。私たちは、もはやメッセージを設定することを心配する必要がないので、それは同じくらい簡単です。

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

レガシーブラウザサポートについては、以下をお読みます。

アップデート（2013年）

orginal答えは（それが書かれていたときに我々は2009年に戻って標的にされたものです）IE6-8とFX1-3.5に適しているが、今はむしろ古く、最新のブラウザでは動作しません - 私は、参考のために下に残ってしまってます。

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年5月に働いていた）オリジナルの答え

それをオンにするには：

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?";
});

他のヒント

の onbeforeunload Microsoft-ism最も近いものを標準溶液が、このブラウザを支援する不均一;例えばオペラで作品をバージョン12以降（まだベータとしてのこ筆).

また、 最大の互換性, 行う必要があります。るだけでなく、その文字列を返し説明を Mozillaデベロッパー-ネットワーク.

例: 定義は以下の二つの機能を効の迅速なります。のMDN例)：

function enableBeforeUnload() {
    window.onbeforeunload = function (e) {
        return "Discard changes?";
    };
}
function disableBeforeUnload() {
    window.onbeforeunload = null;
}

それを定義する形のようになります:

<form method="POST" action="" onsubmit="disableBeforeUnload();">
    <textarea name="text"
              onchange="enableBeforeUnload();"
              onkeyup="enableBeforeUnload();">
    </textarea>
    <button type="submit">Save</button>
</form>

このように、ユーザーにのみおこないを警告していた航行離れしていた場合には変更は、テキストエリアには、を要求されることはありませんその際に提出しました。

ChromeとSafariでこの作業を行うには、あなたがこのようにそれをしなければならないでしょう。

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

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

jQueryを使ってこのようなものにあります行うのはとても簡単。あなたがセットにバインドすることができるからです。

その誰かがものを編集し始めた場合、あなただけ離れてナビゲートをトリガーにしたい。onbeforeunloadを行うのに十分ではない。

jquerys 'beforeunloadは、'

私のために素晴らしい仕事しました

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

これは、任意のデータがフォームに入力された場合にメッセージを提示するために、フォームがサブミットされた場合にメッセージを表示しない簡単な方法である。

$(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;
    });
})

簡単な解決策を探している新しい人々のために、ちょうど試してください Areyousure.js の

をhref="https://stackoverflow.com/a/1119324/811240">ます：

カスタム警告メッセージ

カスタム警告メッセージを許可するには、次のような機能でそれをラップすることができます：

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");
    // ...
}

ここでは、それが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>

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

変更をコミットするために、AJAXを使用している場合は、

は、変更を（すなわち、AJAX成功イベントで）コミットされた後falseするフラグを設定することができます。

標準状態は求めることができることを beforeunload のイベントをキャンセルするか、リターンを設定することによって制御 null以外の値のに値。それはまた、著者は代わりのreturnValueのEvent.preventDefault（）を使用すべきであると述べ、そしてユーザに示すメッセージは、カスタマイズのではありません。

69.0.3497.92のとおり、Chromeは基準を満たしていません。しかし、バグ提出の報告、およびそこにあります< href = "https://chromium-review.googlesource.com/c/chromium/src/+/1154225" のrel = "nofollowをnoreferrer">レビューのが進行中です。クロムのreturnValueがイベントオブジェクトではなく、ハンドラによって返された値を参照して設定する必要があります。

変更が行われたかどうかを追跡するために著者の責任です。それは、変数または必要な場合にイベントのみ処理される保証することによって行うことができる。

window.addEventListener('beforeunload', function (e) {
    // Cancel the event as stated by the standard.
    e.preventDefault();
    // Chrome requires returnValue to be set.
    e.returnValue = '';
});
    
window.location = 'about:blank';

あなたはJSで変数を設定するテキストエリア（または他のフィールド）にonchangeイベントを追加することができます。ユーザーがページ（window.onunload）を閉じようとするときは、その変数の値をチェックし、それに応じてアラートを表示します。

このスレッド上のすべての回答に基づいて、私は次のコードを書き、それが私のために働きました。

あなたがonunloadイベントをチェックする必要が唯一のいくつかの入力/ TEXTAREAタグを持っている場合は、

、あなたはdata-onunload="true"としてHTML5のデータ属性を割り当てることができます。

などのため。

<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?";   
    };
});

ここでは私の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!");
}
}

できる簡単設定 ChangeFlag true、 onChange イベント TextArea.Javascriptを使用表示確認ダイアログボックスに基づく ChangeFlag 値とします。廃棄の移動を要請ページの場合確認 trueを返すと、他 いもの.

あなたが使いたいのはJavaScriptでonunloadイベントです。

http://www.w3schools.com/jsref/event_onunload：

ここでは一例です。 ASP の

あなたがそこからJavaScriptの関数を呼び出すことができbodyタグのための「ONUNLOAD」パラメータがあります。それがfalseを返した場合、それは離れて航行防ぎます。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow