Detecting Popup Blockers

It's too bad, really, that popups were so much misused that blocking them has become the norm.

Some sites can not function correctly without popups, those with shopping carts that use a popup to display cart contents, for example.

It is for those site owners, and those who are otherwise curious about which or how many of their visitors actually do have effective popup blockers, that this article is written.

The article presents a relatively simple test, then progresses to a complex test for integration into websites with indispensable popup functions.

Some popup blocker detectors merely check to see if launching a popup results in a good return value. However, we can't depend on all browsers returning such a value or to make it available to JavaScript. Therefore, we'll go a step further.

I learned this little trick at The JavaScript Source http://www.javascriptsource.com/, one of my favorite JavaScript snippets websites. Here is a modified version of what I found there:

//-- start of snippet --
function PopupBlocked() {
var PUtest = window.open(null,"","width=100,height=100");
try { PUtest.close(); return false; }
catch(e) { return true; }
}

if(PopupBlocked()) {
	alert('Test popup was blocked.');
	// Custom code may replace alert()
	}
else {
	alert('Test popup was successful.');
	// Custom code may replace alert()
	}
//-- end of snippet --

First, PopupBlocked() tries to launch a popup. Next, it tries to close it.

If PopupBlocked() is able to close the popup, the launch was successful and the popup was not blocked. Otherwise, the popup was blocked.

That test is sufficient to test whether or not gratuitous popups are allowed.

Some browsers, however, can be set to allow popups when a link is clicked to launch it, but block them otherwise. To test this type of block, the popup test must be launched with a click.

The same function could be used to test for this type of popup. The link would look something like this:

<a href="java:if(PopupBlocked()){alert('Ouch')}else{alert('OK')}">
Click to test.
</a>

However, site visitors can't be relied upon to click a link for testing their own blockers. Therefore, it is better to test the actual popup the website uses.

Because we won't want to close the popup during this test, it is to be a live popup for the visitor's benefit, something else needs to be used to determine whether or not the popup was successfully opened.

I decided to have the popup communicate with the window that opened it, the parent window. When the popup opens, it runs a script in the parent window. When that script runs, the parent window knows the popup launch was successful.

This involves several coding steps.

1. A line of JavaScript code needs to be put into the popup web page itself.

2. A block of JavaScript code needs to be inserted into the web page that launches the popup, the parent page.

3. And the section in the parent page where the popup is launched needs to be modified.

The Line In the Popup Page

Put this line of JavaScript code somewhere in the popup content where it will run as soon as the popup loads:

opener.window.proofIsTrue();

The Block of Code In the Parent Page

This JavaScript needs to be put into the parent page, the page that launches the popup. It consists of a global variable and two functions.

//-- start of variable and functions block --
var proof = false;

function proofIsTrue() { proof = true; }

function VerifyPopupLaunched(w) {
if(w == "start") { 
	setTimeout("VerifyPopupLaunched('test')",3000);
	return;
	}
if(proof == true) {
	alert('Popup is good!');
	// Custom code can replace alert();
	}
else {
	alert('Popup failed.');
	// Custom code can replace alert();
	}
}
//-- end of variable and functions block --

When the popup loads, it runs the proofIsTrue() function, and that function changes the value of variable proof to true.

Notice the number 3000 near the end of the longest line, in the top half of the above block of code, in function VerifyPopupLaunched(). That number delays the verification for 3 seconds, 3000 milliseconds.

The number may need to be adjusted. It should be large enough to allow the popup to fully load through the slowest Internet connections your visitors may have. Yet, the verification should not be delayed much after that.

Once the timeout period has elapsed, the verification is attempted. If variable proof remains false, the popup launch failed. However, if the variable proof is true, the popup launch was successful.

The Modification in the Parent Page

The code that launches the popup needs to be modified to run the VerifyPopupLaunched() function.

The modification you make depends on how your popup is launched. The goal is to run VerifyPopupLaunched() immediately after the popup is launched.

These two lines of JavaScript are an example.

window.open("popup.html","","width=350,height=400");
VerifyPopupLaunched("start");

Note the "start" value in the call to VerifyPopupLaunched(). That causes the function to set the timer for when to do the actual verification.

It's a fact of life on the Internet, many people have popup blockers. At least, now, you can detect which do and which do not and can adjust your content delivery accordingly.

Will Bontrager