JavaScript: Accessing child window data from a parent window
A friend and former co-worker of mine asked me how you'd go about accessing data on a child window in the parent window in JavaScript. Apparently after extensive searching, the answer wasn't apparent, with most examples showing you how to access data on the parent window from the child. After giving him a solution, I decided to post the example here:
On the parent, make a global variable that points at the child. In this case I've called it "myChild". When you create the child window, you should be able to access anything on that page by calling "myChild.document". You can also use this to set values on the child window.
Have a better solution? I'd love to hear it :)
parent.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
var myChild;
window.onload = function()
{
myChild = window.open(
'child.html',
'Child Window',
'status=0,toolbar=0,menubar=0,resizable=0,scrollbars=0,height=200,width=300'
);
}
</script>
</head>
<body>
<input type="button" value="What's the child saying?" onclick="alert('Child Window Says: ' + myChild.document.getElementById('saying').value);" />
<input type="button" value="Shut the child up!" onclick="myChild.document.getElementById('saying').value = '';">
</body>
</html>child.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<input type="text" id="saying" value="something" />
</body>
</html>On the parent, make a global variable that points at the child. In this case I've called it "myChild". When you create the child window, you should be able to access anything on that page by calling "myChild.document". You can also use this to set values on the child window.
Have a better solution? I'd love to hear it :)
1 Comments
Leave a comment
(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)
i think that's the best you'll come up with for Pop-up manipulation from the opening window.
You can also manipulate the opening window by using top.opener.
http://www.quirksmode.org/js/croswin.html