102

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");
1

11 Answers 11

248

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>
2
  • 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, 2012 at 2: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, 2016 at 18:17
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!

4
  • 1
    i don't want to use timer! any other idea?
    – ArMaN
    May 29, 2012 at 2:33
  • 1
    Somewhat hackish but I think using a timer will work the best across all browsers.
    – Kijewski
    May 29, 2012 at 2: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.
    – ToniWidmo
    Nov 14, 2016 at 15:05
  • As control is in the window opener side substitute alert('closed'); with location.reload();
    – Pepe N O
    May 10, 2022 at 16:17
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' />
3
  • 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, 2012 at 2: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, 2012 at 14:32
  • I used <body onbeforeunload="refreshAndClose();"> <script type="text/javascript"> function refreshAndClose() { window.opener.location.reload(true); } self.close(); </script>
    – steve0nz
    Aug 10, 2013 at 23:43
4

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.

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;​
1
  • 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, 2012 at 2:47
2

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;};
1

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

5
  • "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, 2012 at 2:41
  • -1 removed. If you give a small example you will even get a +1 ;-)
    – Kijewski
    May 29, 2012 at 2:42
  • Never mind. But I don't think window.opener is OK for IE. I'll have a try.
    – Chris Li
    May 29, 2012 at 2:47
  • 1
    @kay, works great in IE7, 8. Very nice, I didn't know it before. +1 for Moses.
    – Chris Li
    May 29, 2012 at 3:11
  • 1
    @ArMaN:jsfiddle.net/8c2e4/10, use window.opener. You can use this to test your environment.
    – Chris Li
    May 29, 2012 at 5:29
1

Try this

        self.opener.location.reload(); 

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

0

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 + "");
    } 
0

You can use the below code in the parent page.

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

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();
                }
            };
        }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.