OnBeforeUnloadダイアログをオーバーライドして自分のダイアログに置き換えるにはどうすればよいですか？

StackOverflow https://stackoverflow.com/questions/276660

質問

ユーザーがページを離れる前に、保存されていない変更について警告する必要があります（かなり一般的な問題）。 

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イベントにバインドできないようです。

役に立ちましたか？

解決

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

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

ここにMicrosoftからの参照があります：

  

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

問題は次のようです：

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

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

jQueryに関する追加のメモ：

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

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

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

2018年9月4日編集：chrome-51以降、onbeforeunloadダイアログのカスタムメッセージは廃止されました（cf：リリースノート）

他のヒント

jQuery を使用し、IE8、Chrome、Firefoxでテストした私にとっては、次のとおりです。

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

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

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

標準のjQuery Dialogの代わりにBoxyを使用しました。ここから入手できます： http：// onehackoranother.com/projects/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.';
    }
};

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

コードを切り取ったため、これはそのままでは機能しない可能性があります。

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

2）重要なことは、returnステートメントの実行を避けることです。これによって、ハンドラーから戻るのを避けるつもりはありません。あなたはすべての権利を返しますが、関数の最後に到達し、returnステートメントを実行しないようにすることでそれを行います。これらの条件下では、組み込みの標準ダイアログは発生しません。

3。 （上記の条件（2）を引き続き尊重）。私はこれを行い、それはうまく動作します。同期ajax呼び出しを行うと、応答が戻るまですべてが保留されます。サーバーからの応答を気にしないと考えて非同期を行うと、ページのアンロードが続行され、このプロセス（実行中のリモートスクリプトを含む）によってajax呼び出しが中止されます。

メッセージの代わりに return; を配置してみてください。これはほとんどのブラウザで動作します。 （これはダイアログの存在を本当に防ぐだけです）

window.onbeforeunload = function(evt) {            
        //Your Extra Code
        return;
}

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

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

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

window.close();

同じ問題に直面しました。自分のメッセージが表示されたダイアログボックスを表示しても問題ありませんでしたが、直面した問題は次のとおりです。 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;

これは、スパムを回避するために、現在Chromeでは実行できません。 javascript onbeforeunloadを参照してください詳細については、カスタムメッセージを表示しません。

 <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

から参照

「バインド」の特殊バージョンを使用する場合コマンド＆quot; one＆quot;。イベントハンドラーが初めて実行されると、イベントハンドラーとして自動的に削除されます。

$(window).one("beforeunload", BeforeUnload);
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top