373

ユーザーがページを離れる前に、変更が保存されていないことをユーザーに警告する必要があります (よくある問題です)。

window.onbeforeunload = handler

これは機能しますが、自分のテキストをラップする刺激的な標準メッセージを含むデフォルトのダイアログが表示されます。テキストが明確になるように標準メッセージを完全に置き換えるか、(さらに良いことに) jQuery を使用してダイアログ全体をモーダル ダイアログに置き換える必要があります。

これまでのところ、私は失敗しており、答えがあると思われる人を他に見つけていません。それは可能ですか？

私のページの Javascript:

<script type="text/javascript">   
    window.onbeforeunload = closeIt;
</script>

closeIt() 関数:

function closeIt()
{
  if (changes == "true" || files == "true")
  {
      return "Here you can append a custom message to the default dialog.";
  }
}

jQueryとjqModalを使用して、この種のことを試しました(カスタム確認ダイアログを使用):

$(window).beforeunload(function () {
    confirm('new message: ' + this.href + ' !', this.href);
    return false;
});

これも機能しません-beforeunloadイベントにバインドできないようです。

4

12 に答える 12

319

のデフォルトのダイアログを変更することはできないonbeforeunloadため、最善の策はそれを使用することです。

window.onbeforeunload = function() {
    return 'You have unsaved changes!';
}

Microsoftからのこれへの参照は次のとおりです。

window.eventのreturnValueプロパティに文字列が割り当てられると、現在のページにとどまり、割り当てられた文字列を保持するオプションをユーザーに提供するダイアログボックスが表示されます。ダイアログボックスに表示されるデフォルトのステートメント「このページから移動してもよろしいですか？... [OK]を押して続行するか、[キャンセル]を押して現在のページにとどまります。」を削除または変更することはできません。

問題は次のようです：

  1. がonbeforeunload呼び出されると、ハンドラーの戻り値をとして受け取りますwindow.event.returnValue。
  2. 次に、戻り値を文字列として解析します（nullでない場合）。
  3. は文字列として解析されるため、ダイアログボックスが起動し、適切な/falseが渡されます。truefalse

その結果、デフォルトのダイアログからそれを防ぐためにfalseを割り当てる方法がないようです。onbeforeunload

jQueryに関する追加の注意事項：

  • jQueryでイベントを設定すると、他のイベントも発生する可能性があるため、問題が発生する可能onbeforeunload性があります。アンロードイベントのみを発生させたい場合は、単純な古いJavaScriptを使用します。

  • jQueryにはショートカットがないため、一般的な構文onbeforeunloadを使用する必要があります。bind

    $(window).bind('beforeunload', function() {} );

編集09/04/2018：onbeforeunloadダイアログのカスタムメッセージはchrome-51以降非推奨になりました（cf：リリースノート）

于 2008-11-10T00:21:25.653 に答える
28

jQueryを使用し、IE8、Chrome、およびFirefoxでテストした場合、私にとってうまくいったのは次のとおりです。

$(window).bind("beforeunload",function(event) {
    if(hasChanged) return "You have unsaved changes";
});

ここで IE と他のブラウザの動作には違いがあるため、プロンプトが必要ない場合は何も返さないことが重要です。

于 2011-02-14T11:37:11.347 に答える
22

状況によってはボックスに対して何もできない場合もありますが、誰かがリンクをクリックするのを傍受することはできます。私にとって、これはほとんどのシナリオで努力する価値があり、フォールバックとして unload イベントを残しました。

標準の jQuery ダイアログの代わりに Boxy を使用しました。

$(':input').change(function() {
    if(!is_dirty){
        // When the user changes a field on this page, set our is_dirty flag.
        is_dirty = true;
    }
});

$('a').mousedown(function(e) {
    if(is_dirty) {
        // if the user navigates away from this page via an anchor link, 
        //    popup a new boxy confirmation.
        answer = Boxy.confirm("You have made some changes which you might want to save.");
    }
});

window.onbeforeunload = function() {
if((is_dirty)&&(!answer)){
            // call this if the box wasn't shown.
    return 'You have made some changes which you might want to save.';
    }
};

別のイベントにアタッチして、クリックされたアンカーの種類をさらにフィルタリングすることもできますが、これは私と私がやりたいことのために機能し、他の人が使用または改善するための例として役立ちます. このソリューションが必要な人のためにこれを共有すると思いました。

コードを切り取ったので、このままでは動かないかもしれません。

于 2012-07-12T04:41:48.000 に答える
9

1) onunload ではなく、onbeforeunload を使用します。

2) 重要なことは、return ステートメントを実行しないことです。これは、ハンドラーから戻るのを避けるという意味ではありません。正常に戻りますが、関数の最後に到達し、return ステートメントを実行しないようにすることでそれを行います。これらの条件下では、組み込みの標準ダイアログは表示されません。

3) onbeforeunload を使用する場合、unbeforeunload ハンドラーで ajax 呼び出しを実行してサーバーを整理できますが、同期呼び出しである必要があり、onbeforeunload ハンドラーで応答を待機して処理する必要があります (引き続き条件 (2) 上記)。私はこれを行い、正常に動作します。同期 ajax 呼び出しを行うと、応答が返されるまですべてが保留されます。サーバーからの応答を気にしないと考えて非同期のものを実行すると、ページのアンロードが続行され、実行中の場合はリモート スクリプトを含め、このプロセスによって ajax 呼び出しが中止されます。

于 2012-09-18T20:48:19.880 に答える
4

メッセージの代わりに aを配置してみてくださいreturn;。これは、ほとんどのブラウザーで機能しています。(これはダイアログのプレゼントを実際に防ぐだけです)

window.onbeforeunload = function(evt) {            
        //Your Extra Code
        return;
}
于 2013-02-21T15:02:56.087 に答える
3

私は同じ問題に直面しました、私は私のメッセージでそれ自身のダイアログボックスを手に入れても大丈夫でした、しかし私が直面した問題は：1）それは私が閉じるクリックだけのためにそれを望むすべてのナビゲーションでメッセージを与えていました。2）ユーザーがキャンセルを選択した場合でも、ブラウザのデフォルトのダイアログボックスが表示されます。

以下は、マスターページに書き込んだソリューションコードです。

function closeMe(evt) {
    if (typeof evt == 'undefined') {
        evt = window.event; }
    if (evt && evt.clientX >= (window.event.screenX - 150) &&
        evt.clientY >= -150 && evt.clientY <= 0) {
        return "Do you want to log out of your current session?";
    }
}
window.onbeforeunload = closeMe;
于 2011-06-10T11:25:10.460 に答える
3

ユーザーがページを離れることを選択した場合にのみ onunload 関数が呼び出されるため、ユーザーがどのボタン (ok またはキャンセル) を押したかを検出できます。この関数では、DOM が折りたたまれているため、可能性は限られています。JavaScript を実行できますが、ajax POST は何もしないため、このメソッドを自動ログアウトに使用することはできません。しかし、それには解決策があります。onunload 関数で window.open('logout.php') が実行されるため、ユーザーは新しいウィンドウを開いてログアウトします。

function onunload = (){
    window.open('logout.php');
}

このコードは、ユーザーがページを離れるか、アクティブなウィンドウを閉じて、ユーザーが「logout.php」によってログアウトしたときに呼び出されます。logout php が次のコードで構成されている場合、新しいウィンドウはすぐに閉じます。

window.close();
于 2012-03-03T13:14:40.523 に答える
1 
 <script type="text/javascript">
        window.onbeforeunload = function(evt) {
            var message = 'Are you sure you want to leave?';
            if (typeof evt == 'undefined') {
                evt = window.event;
            }       
            if (evt) {
                evt.returnValue = message;
            }
            return message;
        } 
    </script>

http://www.codeprojectdownload.comから参照

于 2012-03-16T10:11:24.140 に答える
1

「バインド」コマンド「one」の特殊版を使用するのはどうですか。イベント ハンドラーが初めて実行されると、イベント ハンドラーとして自動的に削除されます。

$(window).one("beforeunload", BeforeUnload);
于 2010-08-20T16:15:41.737 に答える