Close child window on f5 refresh

Question

I have a piece of code that launches another page in an external window.

var myOpenWindow = window.open(...);

I manage this window throughout the applications life cycle and once the forum is completed my managing state closes this window.

However, the issue I am facing is that if the user hits f5 for a hard refresh the window is still open after the main page loads.

At first I thought I could override the window.open to track the state of open windows from my app in a global variable. However, I overlooked the fact that on an f5 reset my global is lost.

This seems like a simple problem, but the solution has evaded me. Is there anyway to close a window opened by window.open when the parent is refreshed?

You should be able to use the unload event. See eg http://stackoverflow.com/questions/26324954/close-all-child-windows-when-parent-window-is-closed — Chris Lear, Nov 04 '15 at 14:08
you could store your global variable in a cookie or storage instead of closing the window — rafaelcastrocouto, Nov 04 '15 at 14:10
Try to use a modal window, from bootstrap. It will close whenever you close or reload page — kasynych, Nov 04 '15 at 14:18
Or you can change `myOpenWindow` variable with child page script when the parent page reload. — user2226755, Nov 04 '15 at 14:23

score 1 · Accepted Answer · answered Nov 04 '15 at 14:13

1

var myOpenWindow = window.open(...);
window.onunload = function(){myOpenWindow.close()};

or better

window.addEventListener('unload',function(){myOpenWindow.close()})

should do that.

MDN: WindowEventHandlers.onunload

answered Nov 04 '15 at 14:13

myf

9,874
2
37
49

Thank you, that is exactly what I needed. – Freddy Nov 04 '15 at 14:17

score 0 · Answer 2 · answered Nov 04 '15 at 14:18

0

Maybe you could use a DIV and place it in the center of the screen. Add some jQueryUI magic and you don't have to worry about popups or blockers or other stuff.

answered Nov 04 '15 at 14:18

2174714

288
2
10

I would prefer to do this in a `JQuery.dialog`, its just not an option at work. – Freddy Nov 04 '15 at 14:20

score 0 · Answer 3 · answered Nov 04 '15 at 14:20

You can keep the window open, with the following code :

When you reload the parent page, the child will change the myOpenWindow when parent page will be loaded.

Parent window :

function detectChild(child) {
    myOpenWindow = child;
    //opener.actionWhenOpen();
}

var myOpenWindow = window.open(...);

window.onunload = function() {
    if (myOpenWindow) {
        myOpenWindow.refreshParent();
    }
};

Child windows :

if (opener) {
    //opener.actionWhenOpen();
    opener.onunload = function() {
        if (opener && opener.myOpenWindow) {
            opener.myOpenWindow.refreshParent();
        }
    };
}

function refreshParent() {
    this.i = ((this.i) ? this.i : 0)+1;
    var i = this.i;
    setTimeout(function() {
        if (!opener) {
            return console.log("Opener closed.");
        } else if (opener.detectChild && !opener.myOpenWindow) {
            this.i = 0;
            opener.detectChild(window);
        } else if (i < 900) {
            console.log("Opener cheked("+i+").");
            refreshParent(i++);
        }
    }, 50);
}

Close child window on f5 refresh

3 Answers3