javascript

This was the question I was asking myself when I had to write a piece of code which needed to respond differently on browser close and on browser refresh. To my worst nightmare i found this issue seemed to trouble a lot a people, i went through lots of forums and blogs which gave multiple solutions some even advising to forget the requirement, as it seemed near impossible to detect the difference between a browser close and refresh.
I think i have stumbled on a snippet of code which will detect if the page was refreshed or closed. I had tested this code on windows (IE 7,8,9 – Chrome – Firefox – Safari – Opera) and mac (Safari 4,5 – Firefox – Chrome).
This is a experimental code which i would like you to use and review it. Do let me know your comments.
On request i am including the 2 sample test files which i used to test on my machine. Run the file test.html from the zip file. Which on close / on refresh of the window will open a popup and once the new popup comes check your browser’s console log.
You will find the parent window close / refresh status message on the console after a 2 second delay. This delay is for the browser to complete the DOM manipulation i.e. close or refresh before we do the check. Please click on the sample code link to download the sample code.
Sample Code
Update: 27/03/2017::
New Sample Code Which Works 🙂

/*
	::How this works::
	1. Checking if an invalid property exist in an object
	2. If parent window exist the return will be 'undefined'
	3. If parent window does not exist, an exception will be raised which we will catch
	4. This exception will tell us that the parent no loger exist thus parent got closed.
	Note: this check is run with a 1 sec delay to make sure the window object gets closed properly.
*/
	function detectRefresh(){
		try
		{
		  if(window.opener.title == undefined){
			isRefresh = true;
			document.write('Window was refreshed!');
		  }
		}
		catch(err)
		{
			isRefresh = false;
			document.write('Window was closed!');
		}	
	}

::How this works::

1. Checking if an invalid property exist in an object

2. If parent window exist the return will be 'undefined'

3. If parent window does not exist, an exception will be raised which we will catch

4. This exception will tell us that the parent no loger exist thus parent got closed.

Note: this check is run with a 1 sec delay to make sure the window object gets closed properly.

function detectRefresh(){

try

{

if(window.opener.title == undefined){

isRefresh = true;

document.write('Window was refreshed!');

}

catch(err)

{

isRefresh = false;

document.write('Window was closed!');

}

Hi,
When i started looking out for javascript code that can detect Chrome’s (17.0) popup blocker, I tried lots of snippets. But most of them dint really work. So once i got it working, I thought it would be good to share with you so that you can make use of the same in your projects. The following is the code snippet::

var pop = window.open("about:blank", "new_window_123", "height=150,width=150");
// Detect pop blocker
setTimeout(function() {
if(!pop || pop.closed || pop.closed == "undefined" || pop == "undefined" || parseInt(pop.innerWidth) == 0){
pop && pop.close();
alert("Popups must be enabled.");
}else{
pop && pop.close();
}}, 1000);

var pop = window.open("about:blank", "new_window_123", "height=150,width=150");

// Detect pop blocker

setTimeout(function() {

if(!pop || pop.closed || pop.closed == "undefined" || pop == "undefined" || parseInt(pop.innerWidth) == 0){

pop && pop.close();

alert("Popups must be enabled.");

}else{

pop && pop.close();

}}, 1000);

What this script does is,
1. Tries to open a popup window and store the window handler in pop variable.
2. Declare an anonymous function with setTimeout set to 1000 milli sec, i.e. 1 sec.
3. So apparently once the 1 sec is complete and the anonymous function gets executed,
3.1 We check if the popup has been loaded, we can see that the ‘pop.innerWidth’ is being used to detect the chrome’s popup mechanism as the popup window’s innerWidth property would have been set to 0 if the popup blocker is enabled.
4. Once all is done we close the popup we had opened.
Send me your comments/suggestions to further optimize the solution.

P.S : as per updates from Anders the script was not working on Chrome 19, now with the inputs from Anders i have modified the script to check for :

// START
 pop.document.documentElement.clientWidth != 150 || pop.document.documentElement.clientHeight != 150
// END

// START

pop.document.documentElement.clientWidth != 150 || pop.document.documentElement.clientHeight != 150

// END

This compares the height and width values to the exact height and width values I set on window.open() method i.e. 150X150 , this enables us to correctly find if the popup is enabled or not. I have checked it on Chrome 21.
Please check out the below mentioned updated code and let me know if you face any issues.
Cheers.
Anand

var pop = window.open("about:blank", "new_window_123", "height=150,width=150");
// Detect pop blocker
setTimeout(function() {
if(!pop || pop.closed || pop.closed == "undefined" || pop == "undefined" || parseInt(pop.innerWidth) == 0 || pop.document.documentElement.clientWidth != 150 || pop.document.documentElement.clientHeight != 150){
pop && pop.close();
alert("Popups must be enabled.");
}else{
alert("Popups is enabled.");
pop && pop.close();
}}, 1000);

var pop = window.open("about:blank", "new_window_123", "height=150,width=150");

// Detect pop blocker

setTimeout(function() {

if(!pop || pop.closed || pop.closed == "undefined" || pop == "undefined" || parseInt(pop.innerWidth) == 0 || pop.document.documentElement.clientWidth != 150 || pop.document.documentElement.clientHeight != 150){

pop && pop.close();

alert("Popups must be enabled.");

}else{

alert("Popups is enabled.");

pop && pop.close();

}}, 1000);

Anand Kanatt – The Blog!

The less boring side of me !

How do i detect if a browser window is closed or refreshed ?