Pop-ups, the interweb, and you

Posted by Phil on April 28, 2009 under Javascript, Web Development | 2 Comments to Read

The problem*: You have a page with a pop-up, and when you click a link on it, it needs to change the page that spawned it.

I searched everywhere and every result listing let me down. Site after site was bitter disappointment, I searched for ‘pop-up close child window redirect parent’, then ‘pop up change parent’, and ‘pop up child link change parent window’. I did find some useful code like the ‘onunload’ event (we’ll cover that another time ). I finally stumbled onto the solution by mashing up a few different solutions that were posted for javascript events and the mysterious ‘window’ method built into the base js library*².

The solution (#1): This solution is for those who want to keep the pop-up open, or just want parent only manipulation (yeah, you can always manipulate the child (pop-up), but solution 2 is soooo much easier for that).

First, let’s build a method to handle pop-ups.

function popWindow(url, myWidth, myHeight, myScrollbars, myTop, myLeft, myMenubar, myResize) {
	window.name = "main"; /* setting this is the key to letting you manipulate the parent window */
	window.open(url, "","width="+myWidth+",height="+myHeight+",scrollbars="+myScrollbars+",top="+myTop+",left="+myLeft+",menubar="+myMenubar+",resizable="+myResize+",bgcolor=#ffffff");
}

Note that we used “window.name” and set it to “main”.  This allows me to reference the parent window from any child windows (pop-ups).  Now that we’ve done that, in our pop-up window we just need to make the link have a target of “main”.  Like so:

<a href="http://fakedoman.com/newpage.html" target="main">Change the parent window!</a>

Now this comes together on your parent page, you click a link that uses the popWindow function that creates the pop-up that can now reference the parent by the name “main”.

The solution (#2): This is the show, the heat, the expletive, the new hotness, and the fresh burnination. Ok, fine, it’s old code that’s been around forever that everyone on the internet forgot about (or at least didn’t blog, write, post, etc).

In your pop up window, build a method like this in your script section (or included js file).

function openParent(webAddress){
	opener.location.href=webAddress;
	window.close();
};

Wow… 2 lines (4 if you count the open and closer of the function), simple, easy. Why has no one told anyone else about this*³ ? Now the only thing left is to call that function in an “onclick” event in your a-tag.

<a href="javascript:void(null);" onclick="javascript:openParent('http://fakedomain.com/newpage.html');"/>

Yes, I pointed the href to “javascript:void(null);”, the onclick event will overwrite the original href call anyway, so this is how you build the link to keep the code valid to W3c standards.

And that, my friends, is how you code a pop-up window that will change the parent window with a link from the pop-up window.

* Yes I heard all of you grumblers in the back saying ‘change the target in the a-tag to “_top” and that’ll solve your problem. And you know what? yeah, in 1998 that would have worked. However these days our pop-ups are javascript based, and not so frames/iframe-y.

*² This statement could very well be false… in fact it’s made up, I’m not sure if it’s built in, I really can’t back that up, yeah, total b.s. and yet the code works in IE6, IE7, IE8, Opera 9.63, Safari 3, Firefox 2, Firefox 3, and Chrome… so that kinda seems “built-in”, or at least understood and interpreted correctly by most browsers.

*³ It could be that pop-ups in legitimate sites really aren’t all that common, and generally the people who use them on their sites are spammers/malware/spyware vendors and should be dragged out in the street and beaten while having their selling slogans chanted and shouted at them (isn’t that a pleasant picture you just painted in your head? your welcome).