尝试检测浏览器关闭事件

72

我尝试了许多方法来通过jQuery或JavaScript检测浏览器关闭事件。但是，不幸的是，我无法检测到关闭。该onbeforeunload和onunload方法也没有工作。

如何检测的窗口close，unload或beforeunload事件？

javascript jquery browser

— Vjeta
source

我不想关闭浏览器，我想检测关闭事件。我试过的是window.onbeforeunload =函数（e）{var message =“您的确认消息在这里。”，e = e || window.event; //对于IE和Firefox，如果（e）{e.returnValue = message; } //对于Safari返回消息；};

— vjeta 2013年

“关闭”是指完全退出浏览器应用程序还是仅关闭选项卡或窗口？当然，根据浏览器的不同，关闭最后打开的选项卡或窗口的操作可能相同。但是，这仍然有助于弄清您的意思。

— 2013年

1

$(window).unload(function(){var e=confirm("Are you sure you want to exit?");if(e){}})

— Surjith SM

您不能这样检测浏览器的关闭，只能检测当前文档的关闭。

— 佩卡2014年

浏览器窗口关闭事件的

— Pekka 2014年

79

您是否尝试过此代码？

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

第二个功能是可选的，以避免在单击#lnkLogOut和.btn元素时提示。

还有一件事，自定义提示在Firefox中将不起作用（即使在最新版本中也是如此）。有关它的更多详细信息，请转到此线程。

— 拉维马利亚
source

@Ravi代码很好。但是，如果用户单击“离开此页面”，我想启动注销功能。但是，如何检测用户是否单击了“离开此页面”？

— Bit_hunter

我不确定是否可行。据我所知这是不可能的。但是，您是否可以参考此答案发布新的问题，以便社区说些什么。

— Ravimallya

@Bit_hunter，您可以执行一个函数，在其中显示一个自定义div，用户可以在其中按Yes或No

— Black Black

刷新页面时，是否有避免消息的方法？

— oracleruiz

1

它不会与自定义消息一起显示，只有浏览器的消息默认显示

— huykon225

50

通过参考各种文章并进行一些试错测试，最终我提出了这个想法，该想法非常适合我。

这个想法是要检测由关闭浏览器触发的卸载事件。在这种情况下，鼠标将离开窗口，指向关闭按钮（'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函数将提供弹出的默认消息，然后返回要显示的文本，而不是函数ConfirmLeave（）中的空字符串。

— 湿婆
source

1

当用户按下离开页面按钮时，启动ajax怎么办？如果不是，那可以替代它

— 吗

我最喜欢的答案。这样可以避免列出所有可能导致您离开页面的DOM元素。除此之外，该代码还可以检测tab \ window关闭keyoard快捷方式。

— GigiSan

1

嗨，希夫。在没有其他选项卡的情况下，除了ALT + F4以外，这在大多数情况下似乎都可以正常工作，即在浏览器中打开页面并按Alt + F4。这将关闭浏览器而不显示任何消息。Ctrl + F4可以在相同的情况下工作。

— Milind Thakkar

1

另外，如果您在该按钮的窗口不在窗口中的情况下向后或向前单击浏览器，则会触发该事件。:-(

— Milind Thakkar

1

该解决方案很好，但是就我而言，它似乎只有在浏览器中打开开发者控制台时才起作用。如果我单击页面（焦点在页面上），则它不起作用。任何想法，为什么会这样？

— 拉胡尔瓦拉

12

在Linux chrome环境下，尝试以下代码对我有用。在运行之前，请确保将jquery附加到文档中。

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

为简单起见，请按照以下步骤操作：

打开http://jsfiddle.net/
在html，css或javascript框中输入内容
尝试在Chrome中关闭标签页

它应该显示以下图片：

在此处输入图片说明

— 哈米杜拉
source

抱歉，在ubuntu中我没有Mozilla33。因此您可以查询jsfiddle的实现

— Khamidulla

小提琴网址不再起作用。请检查并更新

— Shashank Vivek

2

@ShashankVivek小提琴链接确实起作用。再次阅读答案。他们从Web UI的当前版本中删除了“ beforeunload”事件处理。因此，您将不再在jsfiddle中看到通知窗口。但是，使用脚本上部，您仍然可以自己处理事件。我无能为力。

— Khamidulla

在卸载之前阻止了确认（“您真的要关闭吗？”）。

— 阿敏·拉希米

7

嗨，我有一个棘手的解决方案，该解决方案仅适用于新的浏览器：

只需打开服务器的websocket，当用户关闭窗口时，就会触发onclose事件

— 乌策拜尔
source

嗨，我们可以在此onclose事件上显示模式窗口/自定义弹出窗口吗？

— 乔蒂·杜汉

@JyotiDuhan不，您只能在服务器端检测到它

— wutzebaer

4

以下脚本将在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>

铬
在此处输入图片说明

IE浏览器
在此处输入图片说明

在Firefox上，您会收到通用消息

在此处输入图片说明

机制是同步的，因此没有服务器延迟调用将起作用，您仍然可以准备一个模式窗口之类的机制，如果用户决定停留在页面上，则会显示该机制，但是无法阻止他离开。

回应评论中的问题

F5会再次触发事件，Atl+也会触发F4。

— 马塔斯·维特凯维奇（Matas Vaitkevicius）
source

我只想在用户关闭标签或导航器以及Alt + F4时进行检测。

— Kiquenet

@Kiquenet我刚刚在IE8上测试了Alt + f4，它确实触发了机制，在所有浏览器（IE，Chrome，Firefox）上测试Crome触发时，我一定做错了

— Matas Vaitkevicius 2015年

1

当用户按下离开页面按钮时，启动ajax怎么办？如果不是，那可以替代它

— 吗

1

刷新页面时，是否有避免消息的方法？

— oracleruiz

我当时想检测HTA应用程序的关闭事件，因此该解决方案非常有效。

— freginold '16

3

如Phoenix所述，请使用jQuery .bind方法，但是为了获得更多浏览器兼容性，您应该返回String，

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

可以在以下网站找到更多详细信息：developer.mozilla.org

— 马通多
source

1

jQuery .bind（）已被弃用。使用.on（）代替

$(window).on("beforeunload", function() {
    runBeforeClose();
});

— ow3n
source

0

也许最好使用路径检测鼠标。

在BrowserClosureNotice中您可以使用一个演示示例和一个纯JavaScript库。

它不是完美的，但是可以避免文档或鼠标事件的问题...

— Manufosela
source

如果用户只是将鼠标悬停在关闭按钮上却从不按下怎么办？以及如何处理移动浏览器上的情况？

— 黑色

此代码检测何时鼠标移至关闭按钮，但不检测何时按下关闭按钮。如果需要，您也可以添加此事件。就我而言，我不想避免关闭，如果我认为您正在考虑关闭页面，则想显示信息。

— manufosela

但这无论如何都无法在移动浏览器上使用，因此解决方案不是鸡蛋般的黄色。

— 黑色

当然，这种方法不是移动浏览器的解决方案

— manufosela

0

<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中不会显示此消息。

— 用户名
source

-1

<!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>

用于登录的用户关闭浏览器或浏览器选项卡时，它将自动注销用户帐户...

— 拉梅什·坎纳
source

请分享一些解释为什么这个工作，它是如何工作的

— 托马日Bratanič

这用于登录的用户关闭浏览器或浏览器选项卡时，它将自动注销用户帐户。并在数据库中也进行更改....

— ramesh kanna

-2

您可以尝试这样的事情。

<html>
<head>
    <title>test</title>
    <script>
        function openChecking(){
            // alert("open");
            var width = Number(screen.width-(screen.width*0.25));  
            var height = Number(screen.height-(screen.height*0.25));
            var leftscr = Number((screen.width/2)-(width/2)); // center the window
            var topscr = Number((screen.height/2)-(height/2));
            var url = "";
            var title = 'popup';
            var properties = 'width='+width+', height='+height+', top='+topscr+', left='+leftscr;
            var popup = window.open(url, title, properties);
            var crono = window.setInterval(function() {
                if (popup.closed !== false) { // !== opera compatibility reasons
                    window.clearInterval(crono);
                    checkClosed();
                }
            }, 250); //we check if the window is closed every 1/4 second
        }   
        function checkClosed(){
            alert("closed!!");
            // do something
        }
    </script>    
</head>
<body>
    <button onclick="openChecking()">Click Me</button>
</body>
</html>

当用户关闭窗口时，将触发回调。

— 萨尔瓦多
source