Reputation: 10019
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
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
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.
<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>
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
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