Select and focus an already existing window

Question

I run an e-commerce website, and I need to get this popup working when a client submits an order. Ideally, the popop would appear when the order success page loads, but popup blockers will stop this.

Instead, I generate the popup when the use clicks the "confirm order" button, but this obscures the 3DSecure page that the checkout redirects to before the order finishes.

To counteract this, I create the popup when the user clicks "confirm order", but instantly refocus the main window; a pop-under if you will. My plan is to refocus this new window from the order success page.

The issue is that I cannot find a way to get the object for an existing popup so I can run the focus on it. if I create the window using window.open(url,windowName,options), is there a way I can reference that from another page? Something along the lines of window.load(windowName) would be ideal.

Solution 1

The signature of window.open is like this.

var windowObjectReference = window.open(strUrl, strWindowName[, strWindowFeatures]);

MDN notes that,

If a window with the name strWindowName already exists, then strUrl is loaded into the existing window. In this case the return value of the method is the existing window and strWindowFeatures is ignored. Providing an empty string for strUrl is a way to get a reference to an open window by its name without changing the window's location.

So this should work for you.

window.open('', 'windowName', '');

According to MDN whenever a window is opened a reference to it is created,

var windowObjectReference = window.open("http://www.google.com", "popup", "width=500,height=500");

You could always load it using that reference like

if(windowObjectReference != null || !windowObjectReference.closed) {
    windowObjectReference .focus();
}

Solution 2

This is tricky but this works on Chrome. First, open the window:

window.open('/test', 'testw', '');

Another link (even on another page), opens a 'page' in that same window by passing the same window name. The URL is JavaScript (so it's rather a hack):

window.open('javascript:void window.focus()', 'testw', '');

http://jsfiddle.net/pimvdb/KeHtp/

Comments

[Wladimir Palant]

I was just about to write the same thing :) Note that this will only work if all three pages (the one opening the pop-up, the pop-up page and the order confirmation page) belong to the same domain.

[Wladimir Palant]

He asks for a way to reference the pop-up from a different page, not the one that opened it.

[pimvdb]

Can you also pass this reference to another page? I'm curious to know if and how the reference can be serialized.

[naveen]

i was going through this. stackoverflow.com/questions/87359/…

[pimvdb]

@Wladimir Palant: Good to know, I was already thinking something like that would be the case. It does indeed not work cross-domain.

[pimvdb]

I just noticed that it does not work if you close the main tab and open it again. Probably because they are different processes after that.

[Geoff]

This is almost perfect, but it doesn't seem to work for me. Could this be because the 3DSecure check that the checkout redirects to in the middle of this process is on a different domain?

[Mariano Desanze]

The problem with this solution is that it only works on Chrome, and that other browsers might not only ignore it but also throw an error in some particular cases. For instance, IE11 throws "Access is denied" when domains doesn't match.