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

267

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

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

javascript  html  message  onbeforeunload  confirm 
— シミー・ワイツハンドラー
ソース
3
サンプルを機能させるには、関数を次のように変更します。myFunction（）{window.onbeforeunload = "message"; 次に、入力を変更します。<input type = 'text' onchange = 'myFunction（）;'> </ input>
— Keith
— AlikElzin-kilaka

回答:

367

アップデート（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?";
});
— キース
ソース
4
それは次のようになります：$（ 'input：text'）。change（function（）{window.onbeforeunload = $（ 'input：text [value！= ""]'）。length> 0？ "warning"：null ;}）;
— キース、
1
単純なチェックの場合、または変更ごとにさらに複雑な検証を追加できます
— Keith
1
'returnValue'メソッドが標準で指定されている唯一のメソッドであることは注目に値します。そのため、IE6-8だけでなく、すべての標準準拠ブラウザー（この場合、Chrome、Safari、Operaは含まれません）を対象としています。
— rmcclellan 14年
3
フォーム送信のアラートを停止するには、を使用しました$("#submit_button").click(function() { window.onbeforeunload = null; });。私はもともとボタンのonclickイベントを使用していましたが、あまり良くないだけでなく、IE8でも動作しませんでした。
— Andy Beverley、2015
1
@ AlikElzin-kilakaできません。ポップアップテキストを変更する場合は、独自のカスタムポップアップを作成する必要がありますが、window.onbeforeunloadイベントをブロックすることはできません。
— キース
38

onbeforeunloadマイクロソフト-ISMは標準溶液に、我々が持っている最も近いものですが、ブラウザのサポートが不均一であることに注意してください。たとえば、Operaの場合、バージョン12以降でのみ機能します（この執筆時点ではまだベータ版です）。

また、最大限の互換性を得るには、Mozilla Developer Networkで説明されているように、単に文字列を返すだけではありません。

例：ナビゲーションプロンプトを有効/無効にする次の2つの関数を定義します（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>

このようにして、ユーザーはテキスト領域を変更した場合にのみナビゲートすることについて警告され、実際にフォームを送信するときにプロンプ​​トは表示されません。

— ソーレン・ローボルグ
ソース
1
Mozillのサイトに基づいて、最近のほとんどのデスクトップブラウザーがサポートしています：developer.mozilla.org/en/DOM/window.onbeforeunload
— Hengjie
Microsoft-ismは素晴らしい言葉です。
— ルークテイラー
18

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

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

— サムサフラン
ソース
2
@jonstjohnのブログ投稿をヒットできないようです。多分彼は仲間になり、私たちを正しい方向に向けるでしょう？：D
— FLGMwt
14
=> 500内部エラー。そのため、SOではリンクが非推奨になっています。修正されるまで反対票を投じました。
— ロイック
このウェブページはご利用いただけません
— Mateusz
2
このリンクで質問に答えることができますが、回答の重要な部分をここに含め、参照用のリンクを提供することをお勧めします。リンクされたページが変更されると、リンクのみの回答が無効になる可能性があります。
— 15
2
Jon St Johnからの元のリンクは壊れていたので、Wayback Machineバージョンに更新しました。リンクのコンテンツは他の多くのサイトでコピーされて見つけることができますが、サムが追加したものを「保存」した方がよかったと思います
— Alvaro Montoro
11

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

$(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;
    });
})
— カールG
ソース
8

キースのすでに素晴らしい答えを拡張するには：

カスタム警告メッセージ

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

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");
    // ...
}
— マイク
ソース
3

ここで試してみてください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>
— ブレイドン
ソース
3

標準状態プロンプトをキャンセルすることによって制御することができるbeforeunloadのイベントをまたはに戻り値を設定するnull以外の値。また、作成者はreturnValueの代わりにEvent.preventDefault（）を使用する必要があり、ユーザーに表示されるメッセージはカスタマイズできません。。

69.0.3497.92の時点で、Chromeは標準を満たしていません。ただし、バグレポートが提出されており、レビューが進行中です。Chromeでは、ハンドラーから返された値ではなく、イベントオブジェクトを参照して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';
スニペットを展開

— トレバー・カルジャニス
ソース
2

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

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

— キルタン
ソース
1

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

— マクラム・サレ
ソース
1
-あなたはこれを行うことはできませんalertとconfirmの間にブロックされているwindow.onbeforeunloadとwindow.onunload（私のPC版Chromeのバージョンで非常に少なくとも、おそらくまた、すべてのブラウザで、これまでこれらのハンドラをサポートするため）。
— マークアメリー2013
1

このスレッドのすべての回答に基づいて、次のコードを記述しましたが、それは私にとってはうまくいきました。

チェックする必要がある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?";   
    };
});
— サガールガラ
ソース
2
MDNのbeforeunloadドキュメントの「Webkitベースのブラウザがダイアログボックスの仕様に準拠していない」という理由もご覧ください。
— アルジャン
1

ここに私の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!");
}
}
— ジャスティン・ストーン
ソース
0

これは、TextAreaのonChangeイベントでChangeFlagをtrueに設定することで簡単に実行できます。JavaScriptを使用して、ChangeFlag値に基づく確認ダイアログボックスを表示します。confirmがtrueを返した場合はフォームを破棄し、要求されたページに移動します。それ以外の場合は何もしません。

— 単に厳しい
ソース
-1

そこからJavaScript関数を呼び出すことができるbodyタグの「onunload」パラメータがあります。falseが返された場合、ナビゲートできなくなります。

— ストリビカ
ソース
13
幸い、これは実際には機能しません。それ以外の場合は、を含むページにアクセスするのが嫌<body onunload="return false;">です。
— セーレンLøvborg
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.