web-dev-qa-db-ja.com

「このページから移動してもよろしいですか」という表示方法変更がコミットされたとき

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

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

javascripthtmlmessageonbeforeunloadconfirm
243
Shimmy

更新（2017）

最近のブラウザは現在、カスタムメッセージの表示をセキュリティ上の問題と見なしているため、すべてのブラウザから 削除 されています。ブラウザは一般的なメッセージのみを表示するようになりました。メッセージの設定を気にする必要がなくなったので、次のように簡単です。

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

従来のブラウザのサポートについては、以下をお読みください。

更新（2013）

本質的な答えはIE6-8とFX1-3.5（それが書かれたとき私たちが2009年にさかのぼっていたものである）に適しています、しかし現在はむしろ時代遅れで、ほとんどの現在のブラウザではうまくいきません - 私は残しました参考のために以下にそれを。

window.onbeforeunloadは、すべてのブラウザで一貫して扱われるわけではありません。これは文字列ではなく関数参照である必要があります（元の回答で述べたように）が、大部分のブラウザに対するチェックはonbeforeunloadname__に割り当てられているかどうか（nullname__を返す関数を含む）であるためです。

window.onbeforeunloadを関数参照に設定しますが、古いブラウザでは単に文字列を返す代わりにイベントのreturnValuename__を設定する必要があります。

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

メッセージを表示せずにユーザーに続行させたい場合は、confirmOnPageExitname__にチェックを行わせて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?";
});
335
Keith

Microsoftのonbeforeunloadは、標準的なソリューションに最も近いものですが、ブラウザのサポートは一様ではないことに注意してください。例えば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>

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

37
Søren Løvborg

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

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

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

19
sshow

With JQuery これはとても簡単です。セットにバインドできるので。

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

18
Sam Saffron

jquery「beforeunload」は私にとって素晴らしい仕事でした

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

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

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

単純な解決策を探している新しい人のために、単に試してみてください Areyousure.js

11
lawphotog

拡張するには Keithがすでに素晴らしい答えを書いています ：

カスタム警告メッセージ

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

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

ここでこれを試してみてくださいそれは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
Braydon

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

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

2
Kirtan

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

69.0.3497.92の時点で、Chromeは規格を満たしていません。しかし、 bug report ファイルがあり、 review が進行中です。 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
Trevor Karjanis

これが私の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!");
}
}
1
user2926228

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

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

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

1
Makram Saleh

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

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

0
waqasahmed

ChangeFlagをtrueに設定し、onChangeTextAreaのイベントをオンにすると簡単に実行できます。 JavaScriptを使用して、ChangeFlagの値に基づいてconfirmダイアログボックスを表示します。 confirmがtrueを返す場合はフォームを破棄し、要求されたページにナビゲートします。それ以外の場合はdo-nothing。

0
simplyharsh