Я пробовал много методов для обнаружения события закрытия браузера через jQuery или JavaScript. Но, к сожалению, я не смог обнаружить закрытие. Методы onbeforeunload и onunload также не работают.
Как определить окна close, unload или beforeunload событий?
Вы пробовали этот код?
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 (даже в последней версии). Для получения дополнительной информации об этом, перейдите в этот поток.
Обращаясь к различным статьям и выполняя некоторые пробные и пробные проверки, я, наконец, разработал эту идею, которая отлично работает для меня.
Идея заключалась в обнаружении события разгрузки, которое запускается при закрытии браузера. В этом случае мышь выйдет из окна, указывая на кнопку закрытия ( "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().
Попробуйте выполнить следующий код для меня в среде Linux chrome. Перед запуском убедитесь, что jquery прикреплен к документу.
$(document).ready(function()
{
$(window).bind("beforeunload", function() {
return confirm("Do you really want to close?");
});
});
Для простого выполните следующие шаги:
Он должен показать следующее изображение:
Привет, я получил сложное решение, которое работает только в новых браузерах:
просто откройте websocket на вашем сервере, когда пользователь закроет окно, событие onclose будет запущено
После script появится сообщение в 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 
IE 
в Firefox вы получите общее сообщение
Механизм синхронный, поэтому вызовы сервера на задержку не будут работать, вы все равно можете подготовить механизм, например, модальное окно, которое отображается, если пользователь решит остаться на странице, но не сможет предотвратить его уход.
Ответ на вопрос в комментарии
F5 снова запустит событие, поэтому будет Atl + F4.
Как сказал Феникс, используйте метод jQuery.bind, но для большей совместимости с браузером вы должны вернуть String,
$(document).ready(function()
{
$(window).bind("beforeunload", function() {
return "Do you really want to close?";
});
});
более подробную информацию можно найти по адресу: developer.mozilla.org
Может быть, лучше использовать мышь для обнаружения пути.
В BrowserClosureNotice у вас есть демонстрационный пример и чистая библиотека javascript для этого.
Это не идеально, но избегать проблем с документами или событиями мыши...
<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 это сообщение не отображается.
<!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>
Это используется, когда пользователь во время входа в браузер закрывает вкладку браузера или браузера, он автоматически выйдет из учетной записи пользователя...
jQuery .bind() устарел. Используйте вместо этого .on() instead
$(window).on("beforeunload", function() {
runBeforeClose();
});
Вы можете попробовать что-то вроде этого.
<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>
Когда пользователь закрывает окно, обратный вызов будет запущен.