How "beforeunload" and "unload" events work? - javascript

As I understood correctly when user closes a tab or clicks on the link or, even, updates a page "beforeunload" and then "unload" events are triggered. First, I can't register an event handler (some code snippets doesn't work):
From MDN web docs example I have written the following:
window.addEventListener("beforeunload", function (event) {
event.preventDefault();
event.returnValue("Are you sure?");
});
and it doesn't work (I expected dialog appearance)
Also I have tried this:
window.addEventListener("beforeunload", function (event) {
return "Are you sure?";
});
and it doesn't work as well
From w3school docs I have written:
window.onbeforeunload = function () {
return "Are you sure?";
}
and it work! But why the previous doesn't work?
How about triggering on browser or tab closing? Is it possible "to do some operations" when the user closes tab or browser? To be more clear, I want to delete some cookies which refers to his current session when the user closes tab or browser. Or I need to do something like this?
window._link_was_clicked = false;
window.onbeforeunload = function(event) {
if (window._link_was_clicked) {
return; // abort beforeunload
}
// your event handling
};
jQuery(document).on('click', 'a', function(event) {
window._link_was_clicked = true;
});
Here is full demo code which I have written:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.4/angular.min.js"></script>
<script>
angular
.module("app", [])
.controller("Controller", function ($scope) {
$scope.username = localStorage.getItem("username") || "";
$scope.setCookie = function () {
console.log("Set Cookie");
localStorage.setItem("username", "Denys");
$scope.username = localStorage.getItem("username");
}
$scope.deleteCookie = function () {
console.log("Delete Cookie");
localStorage.removeItem("username");
$scope.username = localStorage.getItem("username") || "";
}
})
.run(function () {
console.log("run()");
window.addEventListener("beforeunload", function (event) {
event.preventDefault();
event.returnValue("Are you sure?");
return "Are you sure?";
});
window.addEventListener("unload", function (event) {
localStorage.removeItem("username");
});
window.onbeforeunload = function () {
return "Are you sure?";
}
});
</script>
</head>
<body ng-controller="Controller">
<h1>Hello!</h1>
<p ng-if="username">{{username}}</p>
<p>
<button ng-click="setCookie()">Set Cookie</button>
<button ng-click="deleteCookie()">Delete Cookie</button>
</p>
</body>
</html>

You have added parentheses in the first one even though there aren't any in the MDN documentation:
The event should also fire if the tab is closed.
If you set the cookie expiration correctly you can make it so they delete automatically.

Related

How to detect window close event that was opened using window.open()

I am trying to detect the window close event that I opened using window.open() in javascript. But for some reason, it doesn't seem to work.
Here is my code:
<html>
<head>
<script>
var clicktest = function() {
var newwindow = window.open("https://www.google.com",'myPopupwindow', "height=640,width=960,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");
newwindow.addEventListener("beforeunload", function (e) {
console.log('hey');
});
}
</script>
</head>
<body>
<button onclick="clicktest()">hey</button>
</body>
</html>
I also tried using
newwindow.onbeforeunload = function () {
console.log('hey');
}
instead of window.addeventlistener(), but both didn't work and I did try using window instead of newwindow, still, it didn't work.
For cross-origin documents, the only solution is to poll the .closed property of the popup Window object.
But that is a very ugly thing to do, so please have a second though about why you need that.
To limit the ugliness, you can power your polling using battery friendly requestAnimationFrame:
const popup = window.open('https://google.com');
waitForClose(popup, e=>console.log('closed'));
function waitForClose(win, cb) {
function poll() {
if(win.closed) {
cb();
}
else {
requestAnimationFrame(poll);
}
}
poll();
}
As a fiddle since StackSnippet's iframes don't allow popups.

A simple example using html, javascript and jQuery

I'm starting with javascript, websockets and jQuery developing a simple example. In the html page I only have a button, that, when pressed, has to send its state (ON/OFF for instance). In index html, I have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"></meta>
<title>First App</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/APP.js"></script>
</head>
<body>
<div id='hello_message'>
Connecting...
</div>
<button id='state'>Turn on</button>
<div id='off'>OFF</div>
<div id='on'>ON</div>
</body>
</html>
My intention is to open a websocket between the client and the server when the page is loaded, and keep it open for any information to be sent between both of them. To this end, I have the following file containing the js code (APP.js):
window.onload = APPStart;
// Page onload event handler
function APPStart() {
state = false;
if ("WebSocket" in window)
{
var ws = new WebSocket("ws://10.30.0.142:8020");
ws.onopen = function()
{
alert ("Connected");
$('#hello_message').text("Connected");
};
ws.onmessage = function (evt)
{
var received_msg = evt.data;
};
ws.onclose = function()
{
alert("Connection is closed...");
};
window.onbeforeunload = function(event) {
socket.close();
};
}
else
{
// The browser doesn't support WebSocket
alert("WebSocket NOT supported by your Browser!");
}}
Now, every time someone clicks on button, I would like to execute the following code:
// program checks if led_state button was clicked
$('#state').click(function() {
alert ("click");
// changes local led state
if (led_state == true){
$('#on').hide();
$('#off').show();
state = false;
ws.send("ON");
}
else{
$('#off').hide();
$('#on').show();
state = true;
ws.send("OFF");
}
});
I've tried to put this part of the code inside the function APPStart, but it doesn't work. I also suspect that jQuery is not working either since messages are not updated. Any suggestion to make it work?
Thanks for the comments. The code works, the problem was in the cache of the browser. Once I noticed it, I cleaned the cache and everything started to work. Silly me.

Disable and re-enable a function, Mute and Unmute

Hi I am trying to disable a function with a click of a button and then enable it again once another button is clicked I have tried unbind but I am getting no where
any suggestions to how I can go about this?
Code:
Mute
Unmute
$('.MuteOn').on('click tap touch', function() {
//Disable soundListen function
});
$('.MuteOff').on('click tap touch', function() {
//Enable soundListen function
});
//
setInterval(function soundListen() {
if ($("body").hasClass("fp-viewing-1")) {
audio1.play();
} else {
audio1.pause();
audio1.currentTime = 0;
}
if ($("body").hasClass("fp-viewing-2")) {
audio2.play();
} else {
audio2.pause();
audio2.currentTime = 0;
}
if ($("body").hasClass("fp-viewing-3")) {
audio3.play();
} else {
audio3.pause();
audio3.currentTime = 0;
}
}, 100);
Thank you in advance for any suggestions.
Ok, so I understood it like this:
-On first page user can click mute/unmute button and that should be saved during navigation through all other pages/slides.
Then here is a code:
<!doctype>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<button id="mute">Mute</button>
<button id="unmute">Unmute</button>
<button id="reloadPage">Reload Page</button>
<script type="text/javascript">
//get variable from local variables or set to false(you can change it to TRUE if you like to mute on page load) by default
var isMuted = localStorage.getItem("IsMuted")||false;
//mute button onclick method
$(document).on('click','#mute',function(e){
isMuted = true;
//save to local variables
localStorage.setItem("IsMuted", isMuted);
});
//unmute button onclick method
$(document).on('click','#unmute',function(e){
isMuted = false;
//save to local variables
localStorage.setItem("IsMuted", isMuted);
});
//reload page. also you can use F5 or Ctrl+F5
$(document).on('click','#reloadPage',function(e){
location.reload();
});
$(document).ready(function(){
alert("IsMuted = "+isMuted);
//you can encapsulate this into separate function and bind to show-next-slide button
if(isMuted)
{
return;
}
else
{
//get clip id by class name or another suitable method
PlayMyCoolMusic(clipId);
}
});
function PlayMyCoolMusic(clipId)
{
//your audio player logic here
}
</script>
</body>
</html>
With this you can save you mute/unmute status even if page has been reloaded.

Detect only the browser close event and exclude back, forward and refresh events [duplicate]

I have tried many methods to detect browser close event through jQuery or JavaScript. But, unfortunately, I have not been able to detect the close. The onbeforeunload and onunload methods are also not working.
How do I detect the window close, unload, or beforeunload events?
Have you tried this code?
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;
});
});
The second function is optional to avoid prompting while clicking on #lnkLogOut and .btn elements.
One more thing, The custom Prompt will not work in Firefox (even in latest version also). For more details about it, please go to this thread.
Referring to various articles and doing some trial and error testing, finally I developed this idea which works perfectly for me.
The idea was to detect the unload event that is triggered by closing the browser. In that case, the mouse will be out of the window, pointing out at the close button ('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();
});
The ConfirmLeave function will give the pop up default message, in case there is any need to customize the message, then return the text to be displayed instead of an empty string in function ConfirmLeave().
Try following code works for me under Linux chrome environment. Before running make sure jquery is attached to the document.
$(document).ready(function()
{
$(window).bind("beforeunload", function() {
return confirm("Do you really want to close?");
});
});
For simple follow following steps:
open http://jsfiddle.net/
enter something into html, css or javascript box
try to close tab in chrome
It should show following picture:
Hi i got a tricky solution, which works only on new browsers:
just open a websocket to your server, when the user closes the window, the onclose event will be fired
Following script will give message on Chrome and 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
on Firefox you will get generic message
Mechanism is synchronous so no server calls to delay will work, you still can prepare a mechanism like modal window that is shown if user decides to stay on page, but no way to prevent him from leaving.
Response to question in comment
F5 will fire event again, so will Atl+F4.
As Phoenix said, use jQuery .bind method, but for more browser compatibility you should return a String,
$(document).ready(function()
{
$(window).bind("beforeunload", function() {
return "Do you really want to close?";
});
});
more details can be found at : developer.mozilla.org
jQuery .bind() has been deprecated. Use .on() instead
$(window).on("beforeunload", function() {
runBeforeClose();
});
Maybe it's better to use the path detecting mouse.
In BrowserClosureNotice you have a demo example and pure javascript library to do it.
It isn't perfect, but avoid problems of document or mouse events...
<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>
Please try this code, this is working fine for me. This custom message is coming into Chrome browser but in Mozilla this message is not showing.
<!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>
This is used for when logged in user close the browser or browser tab it will automatically logout the user account...
You can try something like this.
<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>
When the user closes the window, the callback will be fired.

onclick event not firing based on boolean flag

I'm working on some code where if a user clicks on a particular button, that person is NOT presented with an exit popup upon exiting the page. The way I'm doing it is by setting a flag whenever the user clicks on the button. However, my code isn't working as expected: The popup loads whether or not the button is clicked. I don't understand why.
Edit: Help!
<!doctype html>
<html>
<head>
<title>Test!</title>
<script>
var bool = false;
var config = new Object();
config.surveyID = 3155031;
config.takeSurveyURL = 'http://www.supporterfeedback.org/a/TakeSurvey';
config.windowPositionLeft = 200;
config.windowPositionTop = 300;
config.home = 'http://www.surveyanalytics.com/';
config.isRightToLeft = false;
config.showFooter = true;
// document.getElementById("btn").onclick = function()
// {
// bool = true;
// };
function flag() {
bool = true;
}
if (!bool) {
window.onbeforeunload = function () {
QP_popupMain();
};
}
</script>
<script language="javascript"
src="http://www.surveyanalytics.com//javascript/exitSurveyInvitation.js"
type="text/javascript"></script>
<noscript>
Start Survey
</noscript>
</head>
<body>
<a href="http://google.com"><img id="btn" onclick="flag()"
src="http://kelowna.directrouter.com/~jeasprco/wp-content/uploads/2012/05/PanicButton2.png"/></a>
<p>Hello, this is a test!</p>
</body>
</html>
I think window.onbeforeunload = function () is operating as soon as the page loads, so what is inside if(!bool) is executing on the button press.
Try changing these two lines:
// var bool = false;
var bool;
// if (!bool) {
if (bool == false) {
You're testing the flag once, when you assign the .beforeunload handler when the page is loaded. Calling flag() doesn't re-execute that code. You need to test it when the function is called.
window.onbeforeunload = function() {
if (!bool) {
return "You haven't clicked the button, do you really want to leave?"
}
}

Categories

Resources