soapergem
soapergem

Reputation: 10019

Is it possible to reuse a popup window in JavaScript after navigating elsewhere in the parent?

Suppose we have a website in which you click on a button, and that opens a popup (child) window using JavaScript. So let's call the parent A and the popup P. In the source of A, we'd see something like this:

<script type="text/javascript">
P = window.open('P.html', 'P');
</script>

So as long as A is open, we can interact with P in JavaScript using the P variable. However, when I click on a link in A to go to B.html, I lose all the variables. Yet my popup window is still open, so I wonder if there's any way I can link the two back together. Is there any way I can manipulate P from within B? Thanks much.

Upvotes: 3

Views: 3107

Answers (3)

soapergem
soapergem

Reputation: 10019

Well I figured out that, to my pleasant surprise, the answer is YES. Mohammad's solution of using window.top was not correct; when I try to access window.top from within P, that just returns a reference to P itself. RobG's answer just kind of missed the point.

I found that if I do this periodically from within P, everything works:

<!-- A.html, B.html -->
<script type="text/javascript">
function setP(ref)
{
    P = ref;
}
</script>

<!-- P.html -->
<script type="text/javascript">
function updateParent()
{
    if ( typeof window.opener.setP == 'function' ) {
        window.opener.setP(window);
    }
}
window.setInterval(updateParent, 2000);
</script>

This way, even when I navigate the parent window from A to B, B will still be updated with a window reference to P and once that's established the two windows can then communicate freely with each other again.

Upvotes: 3

RobG
RobG

Reputation: 147413

A window can access child windows that it opens, and child windows can access their opener window. If either of the windows navigates to a new URI in a different domain, their content is no longer accessible to the other.

e.g.

Opener window HTML:

<title>Opener window</title>
<script type="text/javascript">

var popWin = (function() {

  var win;

  return {
    open: function() {
      if (!win || win.closed) {
        win = window.open('','child');
        win.document.write(
          '<title>Child window<\/title>' +
          '<script type="text/javascript" src="popWin.js"><\/script>' +
          '<h1>popWin<\/h1>'
        );
      }
      win.document.close();
    },

    close: function() {
      win && win.close();
      win = null;
    }
  };

}());

</script>
<button onclick="popWin.open();">Open child</button>

popWin.js:

window.onload = function() {
   var button = document.createElement('button');
   button.onclick = function() {
     try {
       alert(window.opener.document.title);
     } catch (e) {
       alert('Access to opener failed with error:\n\n' + e.message);
     }
   };
   button.appendChild(document.createTextNode('Check opener'));
   document.body.appendChild(button);
};

If you open the opener document, then click on the button a child window is spawned. Clicking on the button in the child window will show the title of the opener document. Navigate the opener to a new domain then click on the button in the child window and you get an access denied error message, something like:

Permission denied to access property 'document'

Upvotes: 1

Mohammad Shahrouri
Mohammad Shahrouri

Reputation: 384

if the popup is the top most window you can use window.top to access it from within B here is a link with more details window.top

Upvotes: 0

Related Questions