Detecting the Presence of a Popup Blocker with JavaScript

Samples of JavaScript code.

Moderator: Moderators

Detecting the Presence of a Popup Blocker with JavaScript

Postby pentapenguin on Sun Mar 05, 2006 7:45 pm

Popups are evil, right? After all, who hasn't come to hate a dozen popup ads in your face that block the page you're trying to read? Thankfully, all newer browsers have built-in popup blockers or a popup blocker can be added easily with third party software like the Google Toolbar. However, popups occasionally do serve a useful purpose by pointing out useful information to the user. On some sites, a popup window is necessary for the site to work. What if a popup blocker is preventing your popups on your site from appearing? If this happens, your users may become frustrated or leave your site if they can't see an essential popup window. In this tutorial, you'll discover how to check to see if a popup blocker is stopping your popups and how to fix this. To get the most out of this tutorial, you will need to already know how to create new windows in JavaScript and how to use basic if and else clauses.

Actually, checking to see if your popup was blocked is surprisingly easy. Before we go over the code line-by-line later, let's see the actual code first.
[code filename=popups_test.html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Popup Blocker Test</title>
<script type="text/javascript">
function test_popups()
{
var popupwindow = window.open("", "mypopupwindow", "height = 300, width = 300, resizable = 1, status = 1, menubar = 0, scrollbars = 0, toolbar = 0");

if ( popupwindow == null )
{
alert("Your popup blocker seems to be blocking this popup window.");
}

else
{
popupwindow.document.open();
popupwindow.document.write("If you can see this window, then that means popups are working.");
popupwindow.document.close();
popupwindow.focus();
}
}
</script>
</head>
<body onload="test_popups()">
A popup window should have appeared automatically. If not, <a href="javascript:test_popups()">click here</a> to open a popup window.
</body>
</html>
[/code]
You can also see a live demo here.
(And if you're wondering why the popup window comes up when you first load the page and when you click the link, the reason is that you can test to see if your popup blocker blocks both kinds of popups -- automatic ones triggered by an onLoad event or one you manually click on. Please note that this is just example code. I don't recommend using a popup in an onLoad() or onUnload() event unless you absolutely have no other choice. Many popup blockers automatically block all onLoad() or onUnload() popup windows.)

As you can see, this is just a very simple page with some JavaScript. The only thing to note on this page is the test_popups() JavaScript function in an onLoad event and in a link.

Code: Select all
var popupwindow = window.open("", "mypopupwindow", "height = 300, width = 300, resizable = 1, status = 1,  menubar = 0, scrollbars = 0, toolbar = 0");

If you've worked with opening new windows before, this code should look familiar. All this does is open a blank new window and change the properties of it. There is one important thing to note though; the status of the new window is assigned to a variable called popupwindow. If the browser can open a new window, it returns a non null value or true; if it can't open the window, the browser returns null.

Code: Select all
if ( popupwindow == null )

This is the line that does all the work. Remember the popupwindow variable we set? Here it is checked to see if it's not null (or empty or invalid). If the variable is set to null, that means the popup didn't open and an alert box appears letting the user know that his or her popup blocker blocked the popup. This line is all you need to use for Firefox 1.5, Opera 8.5, and Internet Explorer 6. If you would like to be more thorough with checks or if you just use a less popular browser, then you might want to replace that if clause with this code:
Code: Select all
if ( popupwindow == null || typeof(popupwindow) == "undefined" || popupwindow.closed )

Let's quickly go over this new line.
Even though it's not obvious, all JavaScript variables have a data type such as object, string, or number. The typeof() function returns the data type of the variable. So the typeof(popupwindow) == "undefined" checks to see if the popupwindow variable is undefined or invalid. Another way to see if the popup was blocked is to check the closed property of the popupwindow object -- popupwindow.closed returns true if the popup is closed.

However, this alert() box isn't very helpful to an end user. You let the user know that the popup was blocked, but do they know how to unblock the popup? Since you can not determine the name of the popup blocker, it would be difficult to give detailed instructions on how to unblock the popup. A better solution to this problem would be to redirect with JavaScript the user to another page that doesn't need a popup window.

The rest of the JavaScript code just checks to see if the popup has opened and if so, writes a simple message into the window letting the user know that the popup was successfully opened.

Well, that's all for today's tutorial. I hope you learned something useful. Please remember: use popups for good, not evil!

Enjoy! :mrgreen:
User avatar
pentapenguin
Moderator
Moderator
 
Posts: 1466
Joined: Tue Sep 14, 2004 4:15 pm
Location: Georgia, USA

Postby Disturbed One on Sun Mar 05, 2006 7:57 pm

Oooh that's very cool :D. Well done.
High Velocity Media - Accelerated Internet Solutions
http://hvmdesign.com | contact[at]hvmdesign[dot]com
User avatar
Disturbed One
Moderator
Moderator
 
Posts: 2106
Joined: Sat Oct 09, 2004 8:12 pm
Location: Right behind you...

Postby pentapenguin on Sun Mar 05, 2006 8:01 pm

Thank you. :)

Anyone that makes templates that have a popup window for new PMs should include this hack. That way you can get the new PM notification even if you have popups blocked.
User avatar
pentapenguin
Moderator
Moderator
 
Posts: 1466
Joined: Tue Sep 14, 2004 4:15 pm
Location: Georgia, USA

Postby baz-x on Sun Mar 05, 2006 10:21 pm

Nothing happens when viewing it in FF 1.5.0.1 :S
No alert box, no popup window ... no notice from firefox/internet security/or whatever.
Regards
baz-x [blog] [website]
current projects:
» [span style="color: darkgreen"]Mex[/span] [span style="color: darkred"][ 75% ][/span]
» Nickpage Mod 2.0.0 ME [span style="color: red"][ paused ][/span]
» Style Demo Mod 1.2.2 ME [span style="color: red"][ paused ][/span]
User avatar
baz-x
Moderator
Moderator
 
Posts: 706
Joined: Sun Aug 15, 2004 9:12 pm
Location: Cache Management of Mex

Postby Reiji Kurosaky on Sun Mar 05, 2006 10:24 pm

[quote user="baz-x" post="70091"]Nothing happens when viewing it in FF 1.5.0.1 :S
No alert box, no popup window ... no notice from firefox/internet security/or whatever.[/quote]

I´m using FF 1.5.0.1 and is working good.
My sites:
Villavizar.com

My Styles:
[Venus]
User avatar
Reiji Kurosaky
Registered User
Registered User
 
Posts: 858
Joined: Sat Dec 03, 2005 4:05 pm

Postby Disturbed One on Sun Mar 05, 2006 10:26 pm

[quote user="baz-x" post="70091"]Nothing happens when viewing it in FF 1.5.0.1 :S
No alert box, no popup window ... no notice from firefox/internet security/or whatever.[/quote]
I am using v1.5.0.1, but it is working. Do you have javascript enabled?
High Velocity Media - Accelerated Internet Solutions
http://hvmdesign.com | contact[at]hvmdesign[dot]com
User avatar
Disturbed One
Moderator
Moderator
 
Posts: 2106
Joined: Sat Oct 09, 2004 8:12 pm
Location: Right behind you...

Postby pentapenguin on Sun Mar 05, 2006 11:03 pm

[quote user="baz-x" post="70091"]Nothing happens when viewing it in FF 1.5.0.1 :S
No alert box, no popup window ... no notice from firefox/internet security/or whatever.[/quote]
Yeah, make sure JavaScript is enabled. If it is, go to Tools -> JavaScript Console and see if there are any errors (may need to clear it out first).
User avatar
pentapenguin
Moderator
Moderator
 
Posts: 1466
Joined: Tue Sep 14, 2004 4:15 pm
Location: Georgia, USA

Postby baz-x on Sun Mar 05, 2006 11:17 pm

JavaScript needs to be enabled for me, or else I couldn't develop styles (or my CMS). xD
And as I said: no notices from Firefox ...
Regards
baz-x [blog] [website]
current projects:
» [span style="color: darkgreen"]Mex[/span] [span style="color: darkred"][ 75% ][/span]
» Nickpage Mod 2.0.0 ME [span style="color: red"][ paused ][/span]
» Style Demo Mod 1.2.2 ME [span style="color: red"][ paused ][/span]
User avatar
baz-x
Moderator
Moderator
 
Posts: 706
Joined: Sun Aug 15, 2004 9:12 pm
Location: Cache Management of Mex

Postby pentapenguin on Mon Mar 06, 2006 6:47 am

Hmm...go to Tools -> Content -> Popups -> and click on the Allowed sites button and see if you already added pentapenguin.com to your white list.
User avatar
pentapenguin
Moderator
Moderator
 
Posts: 1466
Joined: Tue Sep 14, 2004 4:15 pm
Location: Georgia, USA

Postby baz-x on Mon Mar 06, 2006 8:25 am

I've tried it with enabling popup-windows and disabling popup-windows. Normally if there is a blocked popup window FF notices me about it but nothing happens ...
Regards
baz-x [blog] [website]
current projects:
» [span style="color: darkgreen"]Mex[/span] [span style="color: darkred"][ 75% ][/span]
» Nickpage Mod 2.0.0 ME [span style="color: red"][ paused ][/span]
» Style Demo Mod 1.2.2 ME [span style="color: red"][ paused ][/span]
User avatar
baz-x
Moderator
Moderator
 
Posts: 706
Joined: Sun Aug 15, 2004 9:12 pm
Location: Cache Management of Mex

Postby pentapenguin on Wed Mar 08, 2006 6:26 am

Odd...do you still get no notice if you run the online demo and if you download the code locally?
User avatar
pentapenguin
Moderator
Moderator
 
Posts: 1466
Joined: Tue Sep 14, 2004 4:15 pm
Location: Georgia, USA

Postby Phantom on Wed Mar 08, 2006 11:07 am

Also, would you happen to have Norton Antivirus and Internet Security? It took me ages to figure out that it will block all ads and pop-up windows secretly. There is an option to disable it.
"Best of the best of the best, sir! With honors!" -- MIB
[ jphantom.com ]
Phantom
Registered User
Registered User
 
Posts: 245
Joined: Mon Apr 18, 2005 3:24 am

Postby baz-x on Wed Mar 08, 2006 9:29 pm

Yes, I have Norton Internet Security but I have switched the option to block popups (and ads) off.
Regards
baz-x [blog] [website]
current projects:
» [span style="color: darkgreen"]Mex[/span] [span style="color: darkred"][ 75% ][/span]
» Nickpage Mod 2.0.0 ME [span style="color: red"][ paused ][/span]
» Style Demo Mod 1.2.2 ME [span style="color: red"][ paused ][/span]
User avatar
baz-x
Moderator
Moderator
 
Posts: 706
Joined: Sun Aug 15, 2004 9:12 pm
Location: Cache Management of Mex


Return to JavaScript Tutorials

Who is online

Users browsing this forum: No registered users and 1 guest

cron