Check for popup blocking, and show a friendly message about it

I came across a problem where a flash file in an html window wanted to open a new window (for a pdf document), and the popup was blocked by the browser.
Now, both firefox and internet explorer then show a yellow bar asking whether to allow the popup, but they are very different in handling your answer:

  • Firefox just lets the yellow bar go away, and allows you top open the popup;
  • Internet Explorer 7 reloads the entire page!

Now, this last behaviour was very unwanted, because the page already had all kinds of settings changed before the popup was opened.

The only thing that can really be done, is asking the visitor to allow popups, before all the settings are changed. That way, the page will still reload if IE7, but no harm would be done.

So I created this popup-blocker-check-script, and added a nice graphic to ask the visitor to allow the popup:


You can check the script here, and download the html and image here.
Note: the example only shows something if popups are not allowed in your browser from www.ongevraagdadvies.nl.

The code which is used:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Check popup blocking: all browsers</title>
   <script type="text/javascript">
       function hasPopupBlocker()
       {
           var objChild;
           try {
               objChild = window.open('','child','width=50,height=50,status=no,resizable=yes,x=0,y=0');
               objChild.close();
           }
           catch(e) { }
           
           if(String(objChild).toLowerCase().indexOf('object') == -1)
               return true;
           return false;
       }
       function displayWarning(how)
       {
           document.getElementById('popupwarndiv').style.display=how;
       }
   </script>
</head>
<body>
   <div style="display:none;position:absolute;top: 0px;z-index:999;width:100%; text-align:center" id="popupwarndiv"><div style="margin:0px auto; width:349px;">
       <img src="popupwarning.png" alt="Please click on the yellow bar, and choose 'Allow popups from this site'." width="349" height="185" border="0" usemap="#Map" />
       <map name="Map" id="Map">
           <area shape="rect" coords="309,3,344,37" href="javascript:displayWarning('none')" title="Close this layover" />
       </map>
   </div></div>
   <script type="text/javascript">
       if (hasPopupBlocker())
           displayWarning('block');
   </script>
</body>
</html>
del.icio.us Digg StumbleUpon Facebook Technorati Fav reddit Google Bookmarks
| Viewed 3567 times

No comments yet.

(will not be published)
Leave this field empty