JavaScript Popups
Something I've noticed recently, whilst installing many different WordPress plugins on my site and on other sites is the inconsistency in JavaScript popup window code used in many plugins, allowing for the same popup to be opened numerous times or for a popup to hide in the background behind another page. The basic code to open a popup is:
window.open('http://bla.com','myWindow','status = 1, height = 300, width = 300, resizable = 0');
However, if you add this code as the onclick for a button or anchor tag it will open a new popup each time it is clicked regardless of the fact that the window may already be open. Adding return false; will prevent this from happening, but then if the window is at the bottom of the pile clicking on the link will do nothing.
To ensure the window is brought to the front the code should be executed like this:
myPopup = window.open('http://bla.com','myWindow','status = 1, height = 300, width = 300, resizable = 0'); myPopup.focus(); return false;
Hey Sam,
In the second example the window.open object and it’s properties are being assigned to a custom window object reference. This makes the process of isolating, controlling, and recognising individual window.open objects easier. Basically, the window object reference ties the main window to the sub-window as well as creating a link between the secondary window to its main opener window.
If you wanted to harden the function shown above some more you could do something like whats below. This ensures the creation code isn’t ran if the window already exists. You can also test and verify if a window is closed by using ‘w.closed’, err not done here.
function openWin(url){
var w=null;
if(!w)w=window.open(url,….);
else w.focus();
return false;
}
Using approches like these is very bad news. Best practice is to avoid using window.open() at all.
<a href=”#” rel=”nofollow”>
<a href=”window.open(…)” rel=”nofollow”>
Anyway, if you were to, ideally the event that fires this function should be attached to the link unobtrusively, however, at the end of the day it will be formed something like this…
…onclick=”return openWin(this.href);”
I.E 7 will put an end to developers setting certain properties by force, e.g. removing the address bar, due to accessibility and security reasons… No doubt someone will find a work around.
cheers, c-received
Hmmm.. muffed my code and turned it into real HTML … Should fix this soon mate, also have a look into Cross Site Scripting as it would be quite easy to do this on your site.. E.G
a=”get”;
b=”URL(\”";
c=”javascript:”;
d=”alert(’XSS’);\”)”;
eval(a+b+c+d);
blah blah…
or to test this way ..
”;!–”=view source
Hi c-received,
Thanks for your detailed response. I will indeed look into Cross Site Scripting. I think you are right that using the window.open(…) method is not great. This brief article was written after I’d spent ages scanning throught the code of about 4 or 5 wp plugins that I’d installed on a clients site to fix these popup window problems.
S