Open popup and refresh parent page on close popup

Question

I opened a popup window by window.open in JavaScript, I want to refresh parent page when I close this popup window.(onclose event?) how can I do that?

window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");

Please check this: http://stackoverflow.com/questions/18321323/submit-form-reload-parent-and-close-child/36855748#36855748 might help someone — NoNaMe, Apr 26 '16 at 05:16

Morrison Cole · Accepted Answer · 2012-05-29T02:37:24.453

247

You can access parent window using 'window.opener', so, write something like the following in the child window:

<script>
    window.onunload = refreshParent;
    function refreshParent() {
        window.opener.location.reload();
    }
</script>

edited May 29 '12 at 02:37

answered May 29 '12 at 02:35

Morrison Cole

3,087
1
15
19

I didn't know window.opener, thanks! I always put the caller window in a variable in the contentWindow of the child. :-/ – Kijewski May 29 '12 at 02:36
6

If you don't control JavaScript on the child page (e.g. OAuth flow) then you will need to check `popupWindow.closed` using `setInterval` like in @Zuul's solution. – jchook May 11 '16 at 18:17

score 38 · Answer 2 · answered May 29 '12 at 02:31

38

The pop-up window does not have any close event that you can listen to.

On the other hand, there is a closed property that is set to true when the window gets closed.

You can set a timer to check that closed property and do it like this:

var win = window.open('foo.html', 'windowName',"width=200,height=200,scrollbars=no");   
var timer = setInterval(function() {   
    if(win.closed) {  
        clearInterval(timer);  
        alert('closed');  
    }  
}, 1000);

See this working Fiddle example!

answered May 29 '12 at 02:31

Zuul

16,217
6
61
88

1

i don't want to use timer! any other idea? – ArMaN May 29 '12 at 02:33
1

Somewhat hackish but I think using a timer will work the best across all browsers. – Kijewski May 29 '12 at 02:52
This is also the best solution if the popup has several pages before it closes, as the onunload event is triggered only after the user navigates away from the first page. – AntonChanning Nov 14 '16 at 15:05
As control is in the window opener side substitute `alert('closed');` with `location.reload();` – Pepe N O May 10 '22 at 16:17

Ray Cheng · Answer 3 · 2012-05-29T14:30:55.523

14

on your child page, put these:

<script type="text/javascript">
    function refreshAndClose() {
        window.opener.location.reload(true);
        window.close();
    }
</script>

and

<body onbeforeunload="refreshAndClose();">

but as a good UI design, you should use a Close button because it's more user friendly. see code below.

<script type="text/javascript">
    $(document).ready(function () {
        $('#btn').click(function () {
            window.opener.location.reload(true);
            window.close();
        });
    });
</script>

<input type='button' id='btn' value='Close' />

edited May 29 '12 at 14:30

answered May 29 '12 at 02:38

Ray Cheng

12,230
14
74
137

when the popup window is closed, not when the user clicks a button to refresh the page and close the popup window – gengkev May 29 '12 at 02:40
@gengkev, i knew OP wanted to attach the event to window close, but i believe using a button is a better UI design. however, i included code for both. please advise. – Ray Cheng May 29 '12 at 14:32
I used – steve0nz Aug 10 '13 at 23:43

score 4 · Answer 4 · answered Oct 02 '13 at 03:26

I use this:

<script language='javascript'>
var t;
function doLoad() {
t = setTimeout("window.close()",1000);
}

</script>
<script type="text/javascript">
function refreshAndClose() {
    window.opener.location.reload(true);
    window.close();
}
</script>
<body onbeforeunload="refreshAndClose();" onLoad='doLoad()''>

when the window closes it then refreshes the parent window.

score 2 · Answer 5 · answered May 29 '12 at 02:42

2

window.open will return a reference to the newly created window, provided the URL opened complies with Same Origin Policy.

This should work:

function windowClose() {
    window.location.reload();
}

var foo = window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");
foo.onbeforeunload= windowClose;

answered May 29 '12 at 02:42

cranz

126
2

Won't work if the user shall be able to follow links in the opened window. And I am quite sure an unload event is thrown before the target URL is first loaded, as you implicitly leave about:blank. (+1 for mentioning SOP) – Kijewski May 29 '12 at 02:47

Jitendra Sawant · Answer 6 · 2015-06-27T17:34:53.810

In my case I opened a pop up window on click on linkbutton in parent page. To refresh parent on closing child using

window.opener.location.reload();

in child window caused re open the child window (Might be because of View State I guess. Correct me If I m wrong). So I decided not to reload page in parent and load the the page again assigning same url to it.

To avoid popup opening again after closing pop up window this might help,

window.onunload = function(){
    window.opener.location = window.opener.location;};

score 1 · Answer 7 · answered May 29 '12 at 02:39

1

If your app runs on an HTML5 enabled browser. You can use postMessage. The example given there is quite similar to yours.

answered May 29 '12 at 02:39

Chris Li

3,715
3
29
31

"Otherwise, you cannot communicate between across different windows." is wrong. The technique is still possible, though I'd recommend the answer from @Moses – gengkev May 29 '12 at 02:41
-1 removed. If you give a small example you will even get a +1 ;-) – Kijewski May 29 '12 at 02:42
Never mind. But I don't think window.opener is OK for IE. I'll have a try. – Chris Li May 29 '12 at 02:47
1

@kay, works great in IE7, 8. Very nice, I didn't know it before. +1 for Moses. – Chris Li May 29 '12 at 03:11
1

@ArMaN:http://jsfiddle.net/8c2e4/10/, use window.opener. You can use this to test your environment. – Chris Li May 29 '12 at 05:29

score 1 · Answer 8 · answered Sep 16 '15 at 10:41

1

Try this

        self.opener.location.reload();

Open the parent of a current window and reload the location.

answered Sep 16 '15 at 10:41

nmkyuppie

1,456
1
14
30

score 0 · Answer 9 · answered Oct 15 '14 at 09:51

You can reach main page with parent command (parent is the window) after the step you can make everything...

    function funcx() {
        var result = confirm('bla bla bla.!');
        if(result)
            //parent.location.assign("http://localhost:58250/Ekocc/" + document.getElementById('hdnLink').value + "");
            parent.location.assign("http://blabla.com/" + document.getElementById('hdnLink').value + "");
    }

score 0 · Answer 10 · edited Feb 26 '16 at 11:56

0

You can use the below code in the parent page.

<script>
    window.onunload = refreshParent;
    function refreshParent() {
      window.opener.location.reload();
    }
</script>

edited Feb 26 '16 at 11:56

Khushal Dave

507
5
19

answered Nov 03 '14 at 04:37

muqofa

1

score 0 · Answer 11 · answered Oct 03 '16 at 09:44

Following code will manage to refresh parent window post close :

function ManageQB_PopUp() {
            $(document).ready(function () {
                window.close();
            });
            window.onunload = function () {
                var win = window.opener;
                if (!win.closed) {
                    window.opener.location.reload();
                }
            };
        }

Open popup and refresh parent page on close popup

11 Answers11

Linked