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!
. Well done.
