New windows, new tabs and popup blockers
by
, 12-07-2012 at 09:33 PM (37052 Views)
(To see and test what this is all about, you should download Safari if you haven't already done so. After that, use the code below with popup blocker enabled AND with popup blocker disabled, using Safari).
When a new window or tab is not explicitly requested by the visitor of a site i.e. when the window's appearance is attached to such events as onload or onunload, popup blockers (if enabled) will prevent a file from being opened. But when the window's appearance is attached to an onclick event on a link (and other events that can be taken to mean that a person has explicitly requested a new window, like the onchange in a select box, see below), the browser won't allow popup blockers to stop windows or tabs from appearing.
Well, not quite so. Sometimes, browsers / popup blockers make mistakes and block windows or tabs although they are explicitly requested by the user. One such example is Safari's treatment of links in the options of a select box. A simple example of a script for opening a new window or tab using the onclick event is the following:
A click on the second option of both select boxes above should open a new window (first select box) or a new tab (second select box). And that's indeed what happens in IE, Firefox, Chrome and Opera (popup blockers enabled!). But not so with Safari. This browser does not recognize onchange=open_in_new_window(...) and onchange=open_in_new_tab(...) as explicit requests. In this particular case, it views the onchange as something that is forced upon the user and that, therefore, must be prevented to happen.Code:<script> function open_in_new_window(url) { var wwidth=700; var lleft=parseInt(screen.width/2)-parseInt(wwidth/2); the_popup=window.open(url,"_blank","left="+lleft+",width="+wwidth+",height=400, top=100"); } function open_in_new_tab(url) {window.open('','_new').location.replace(url)} </script> <select onchange="selectedIndex=0; open_in_new_window('http://www.dynamicdrive.com');"> <option disabled="disabled" selected>Destination in new window</option> <option >Open in new window</option> </select> <select onchange="selectedIndex=0; open_in_new_tab('http://www.dynamicdrive.com')"> <option disabled="disabled" selected>Destination in new tab</option> <option >Open in new tab</option> </select>
There may be other cases where things like this may happen (with Safari or with other browsers). So we must have a means to warn the user to disable his/her popup blocker in particular cases. The code is simple. We must simply verify whether or not the browser 'recognizes' or allows an event. In our example, Safari apparently does not recognize or allow window.open and window.open('','_new') (if blocking popups is enabled). We can use this information to modify the script given above as follows:
Code:<script> function open_in_new_window(url) { var wwidth=700; var lleft=parseInt(screen.width/2)-parseInt(wwidth/2); the_popup=window.open(url,"_blank","left="+lleft+",width="+wwidth+",height=400, top=100"); if (typeof(the_popup)=='undefined'){alert("Your browser tried to open:\n\n"+unescape(url)+"\n\nAlthough this is a safe file, your security settings prevented it from being opened in a new window. Please disable your pop-up blocker, reload the page, then click the link again."); } } function open_in_new_tab(url) { if (typeof(window.open('','_new'))=='undefined') { alert("Your browser tried to open:\n\n"+unescape(url)+"\n\nAlthough this is a safe file, your security settings prevented it from being opened in a new tab. Please disable your pop-up blocker, reload the page, then click the link again."); } window.open('','_new').location.replace(url) } </script>
DEMO AND EXPLANATIONS here (you must use Safari).
Arie