web-dev-qa-db-ja.com

ブラウザの閉じるイベントを検出しようとしています

JQueryまたはJavaScriptを使用して、ブラウザーの閉じるイベントを検出する多くの方法を試しました。しかし、残念ながら、私は終値を検出できませんでした。 onbeforeunloadおよびonunloadメソッドも機能していません。

ウィンドウclose、unload、またはbeforeunloadイベントを検出するにはどうすればよいですか？

javascriptjquerybrowser
55
vjeta

このコードを試しましたか？

window.onbeforeunload = function (event) {
    var message = 'Important: Please click on \'Save\' button to leave this page.';
    if (typeof event == 'undefined') {
        event = window.event;
    }
    if (event) {
        event.returnValue = message;
    }
    return message;
};

$(function () {
    $("a").not('#lnkLogOut').click(function () {
        window.onbeforeunload = null;
    });
    $(".btn").click(function () {
        window.onbeforeunload = null;
});
});

2番目の関数は、#lnkLogOutおよび.btn要素をクリックする際のプロンプトを回避するためにオプションです。

もう1つ、Firefoxではカスタムプロンプトが機能しません（最新バージョンでも）。詳細については、 this threadをご覧ください。

63
Ravimallya

さまざまな記事を参照し、試行錯誤を繰り返して、ようやくこのアイデアを完成させました。

アイデアは、ブラウザーを閉じることによってトリガーされるアンロードイベントを検出することでした。その場合、マウスはウィンドウの外にあり、閉じるボタン（ 'X'）を指しています。

$(window).on('mouseover', (function () {
    window.onbeforeunload = null;
}));
$(window).on('mouseout', (function () {
    window.onbeforeunload = ConfirmLeave;
}));
function ConfirmLeave() {
    return "";
}
var prevKey="";
$(document).keydown(function (e) {            
    if (e.key=="F5") {
        window.onbeforeunload = ConfirmLeave;
    }
    else if (e.key.toUpperCase() == "W" && prevKey == "CONTROL") {                
        window.onbeforeunload = ConfirmLeave;   
    }
    else if (e.key.toUpperCase() == "R" && prevKey == "CONTROL") {
        window.onbeforeunload = ConfirmLeave;
    }
    else if (e.key.toUpperCase() == "F4" && (prevKey == "ALT" || prevKey == "CONTROL")) {
        window.onbeforeunload = ConfirmLeave;
    }
    prevKey = e.key.toUpperCase();
});

ConfirmLeave関数は、メッセージをカスタマイズする必要がある場合にポップアップのデフォルトメッセージを表示し、function ConfirmLeave（）。

37
shiv

Linux chrome環境で動作する次のコードを試してください。実行する前に、jqueryがドキュメントに添付されていることを確認してください。

$(document).ready(function()
{
    $(window).bind("beforeunload", function() { 
        return confirm("Do you really want to close?"); 
    });
});

簡単な手順は次のとおりです。

  1. オープン http://jsfiddle.net/
  2. html、cssまたはjavascriptボックスに何かを入力してください
  3. chromeでタブを閉じてみてください

次の図が表示されます。

enter image description here

11
Khamidulla

こんにちは私は新しいブラウザでのみ動作するトリッキーなソリューションを得ました：

サーバーへのWebSocketを開くだけです。ユーザーがウィンドウを閉じると、oncloseイベントが発生します

7
wutzebaer

フェニックスが言ったように、jQuery .bindメソッドを使用しますが、ブラウザーの互換性を高めるには、Stringを返す必要があります。

$(document).ready(function()
{
    $(window).bind("beforeunload", function() { 
        return "Do you really want to close?"; 
    });
});

詳細については、 developer.mozilla.org を参照してください。

3
Macondo

次のスクリプトは、ChromeおよびIEでメッセージを表示します。

<script>
window.onbeforeunload = function (e) {
// Your logic to prepare for 'Stay on this Page' goes here 

    return "Please click 'Stay on this Page' and we will give you candy";
};
</script>

Chrome
enter image description here

IE
enter image description here

firefoxでは、一般的なメッセージが表示されます

enter image description here

メカニズムは同期であるため、遅延へのサーバー呼び出しは機能しません。ユーザーがページにとどまることを決定した場合に表示されるモーダルウィンドウのようなメカニズムを準備できますが、離れることを防ぐ方法はありません。

コメント内の質問への回答

F5 再びイベントを発生させますので、 Atl+F4。

3
Matas Vaitkevicius

たぶん、パス検出マウスを使用する方が良いでしょう。

BrowserClosureNotice には、デモの例とそれを行うための純粋なJavaScriptライブラリがあります。

完璧ではありませんが、ドキュメントやマウスのイベントの問題を避けてください...

0
manufosela
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript" language="javascript">

var validNavigation = false;

function endSession() {
// Browser or broswer tab is closed
// Do sth here ...
alert("bye");
}

function wireUpEvents() {
/*
* For a list of events that triggers onbeforeunload on IE
* check http://msdn.Microsoft.com/en-us/library/ms536907(VS.85).aspx
*/
window.onbeforeunload = function() {
  if (!validNavigation) {

            var ref="load";
      $.ajax({
            type: 'get',
            async: false,
            url: 'logout.php',
 data:
            {
                ref:ref               
            },
             success:function(data)
            {
                console.log(data);
            }
            });
     endSession();
  }
 }

// Attach the event keypress to exclude the F5 refresh
$(document).bind('keypress', function(e) {
if (e.keyCode == 116){
  validNavigation = true;
}
});

// Attach the event click for all links in the page
$("a").bind("click", function() {
validNavigation = true;
});

 // Attach the event submit for all forms in the page
 $("form").bind("submit", function() {
 validNavigation = true;
 });

 // Attach the event click for all inputs in the page
 $("input[type=submit]").bind("click", function() {
 validNavigation = true;
 });

}

// Wire up the events as soon as the DOM tree is ready
$(document).ready(function() {
wireUpEvents();  
}); 
</script>

これは、ログインしているユーザーがブラウザーまたはブラウザータブを閉じると、ユーザーアカウントを自動的にログアウトするために使用されます...

0
ramesh kanna
<script type="text/javascript">
window.addEventListener("beforeunload", function (e) {

  var confirmationMessage = "Are you sure you want to leave this page without placing the order ?";
  (e || window.event).returnValue = confirmationMessage;
  return confirmationMessage;

});
</script>

このコードを試してください、これは私のためにうまく機能しています。このカスタムメッセージはChromeブラウザに入りますが、Mozillaではこのメッセージは表示されません。

0
user2753425