JavaScript Window Popup and its Parent an Oldie but Useful

May 22, 2013 9:50 pm Leave your thoughts

Javascript popup window is a simple technique that is now quickly becoming “the forgotten” technique. The reason is of course the advancements of modern javascript single window applications. However sometimes we still need to use these popups. For example if you need to launch a sub-application within your website that you would like to keep separate, such as monitoring window or statistic views.

So here’s a small javascript codes that will open a new window and in addition the popup window will be a able to control the opener window. Most of the time, the popping up is simple however controlling the opener is something that I personally cannot remember on top of my head.

We start with the code of the opener page:

//let's assume that the trigger to open a popup is a h1

//we put this window's name so the popup can control it
window.name = "theOpener";

$('h1').click(function() {
    //making a popup window
    var popup = window.open("http://jsfiddle.net/codingepiphany/wfXPE/", "ourPopup", "height = 768, width = 1024");

});

//let's assume that the trigger to open a popup is a h1

//we put this window's name so the popup can control it

window.name = "theOpener";

$('h1').click(function() {

//making a popup window

var popup = window.open("http://jsfiddle.net/codingepiphany/wfXPE/", "ourPopup", "height = 768, width = 1024");

});

In the code snippet above, we specifically call the current window name “theOpener”, the reason for calling this is to make sure that we still have the reference to this opener window if the popup gets redirected somehow.

Now let’s take a look at the popup window code:

//again we assume we use h1 to trigger our action

$('h1').click(function() {
    window.open("http://www.rv35mm.com", "theOpener")
});

//again we assume we use h1 to trigger our action

$('h1').click(function() {

window.open("http://www.rv35mm.com", "theOpener")

});

By forcing opening a new url on the same parent window name as the one we defined earlier, we essentially tell the browser to open the new website in the opener window.

Now, another conventional way of modifying the opener window is by using window.opener.location = “http://something” however if the popup window is already redirected elsewhere, then the “opener” reference is gone, hence we have to hardcode the name of the opener window.

I know that this approach can be unpopular these days, but it’s good to know an older alternative like this in case we ever need to use this.

Have a look at the demo below for what the snippets will do.

Categorised in: Javascript

JavaScript Window Popup and its Parent an Oldie but Useful

Share this: