5

I have looked for awhile and cannot find an answer that fits my needs. I have a page that pops a window (window.open), logs the user in (creates a cookie, set session) then redirects to another page. While the modal is redirecting, I would like to refresh the parent page, so all the good stuff that I just did will be recognized by the parent. I have tried window.opener and stuff like that. Can someone help me out a little? Thanks

7wp
  • 12,505
  • 20
  • 77
  • 103
Isaac Levin
  • 51
  • 1
  • 1
  • 2
  • 1
    Did you mean "Refresh the parent from the CHILD javascript"? I like green chili, being from New Mexico, but I don't know what a chili is in this context. – Brian Stinar Sep 21 '10 at 16:23
  • window.parent isn't it? `window.parent.frames[0]` or similar https://developer.mozilla.org/en/DOM – David Yell Sep 21 '10 at 16:23
  • window.opener is usually what you will call on the child window. Can you show your script your using to open this new window? – Ryan Ternier Sep 21 '10 at 16:25

4 Answers4

10

window.opener in the popup will refer to the window object of the opening window, so of course you should be able to call window.opener.location.reload();. Provided you don't run afoul of the Same Origin Policy, the popup window can call scripts and manipulate properties on the parent window object just like code in the parent can.

Here's a live example demonstrating the child calling back to a function on the parent, and also manipulating the parent directly. The full code for this is quoted below.

But that example didn't do exactly what you said, so I've done this one as well, which has the child refreshing the parent page via window.opener.location.reload().

Parent code of first live example:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Parent Window</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <input type='button' id='btnOpen' value='Open Window'>
  <div id='display'></div>
</body>
<script type='text/javascript'>
  (function() {
    var btnOpen = document.getElementById('btnOpen');
    btnOpen.onclick = btnOpenClick;

    function btnOpenClick() {
      window.open('http://jsbin.com/ehupo4/2');
    }

    // Make the callback function available on our
    // `window` object. I'm doing this explicitly
    // here because I prefer to export any globals
    // I'm going to create explicitly, but if you
    // just declare a function in a script block
    // and *not* inside another function, that will
    // automatically become a property of `window`
    window.callback = childCallback;
    function childCallback() {
      document.getElementById('display').innerHTML =
          'Got callback from child window at ' + new Date();
    }
  })();
</script>
</html>​

(You don't have to use a scoping function as I did above, but it's useful to keep your globals contained.)

Child code of first live example:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Child Window</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <p>I'm the child window</p>
</body>
<script type='text/javascript'>
  if (window.opener) {
    // Call the provided callback
    window.opener.callback();

    // Do something directly
    var p = window.opener.document.createElement('p');
    p.innerHTML = "I was added by the child directly.";
    window.opener.document.body.appendChild(p);
  }
</script>
</html>​
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
1

window.parent.top.location = window.parent.top.location; (or something similiar to that will do it)

automagic
  • 1,067
  • 8
  • 10
1

If none of the other suggestions work (Remember to test in all major browsers), you can also try passing a reference of the parent window to the child window explicitly. Because window.open() should return a reference to the child window.. so you can do child = window.open() and then you can do something like child.myParent = window

7wp
  • 12,505
  • 20
  • 77
  • 103
  • Very true. `window.opener` is reliable barring the SOP, and this will run afoul of the SOP as well, but good to have options. You have to deal with timing a bit, which is part of why I prefer to have the child call the parent. – T.J. Crowder Sep 21 '10 at 16:34
0

I had the same issue with submitting a form in a modal via ajax and need the page underneath (parent page) to reload. window.location.reload(); worked for me.

ahimmelstoss
  • 105
  • 1
  • 8