passing data from parent window to child window problems

This site is best viewed in a modern browser with JavaScript enabled.

passing data from parent window to child window problems

Jian

Hi,

I am trying to pass data from a parent window to a child window. But there are several problems. The code snippet is following:

Parent Window:
var v = document.createElement("input");
v.setAttribute('id', 'test');
v.setAttribute('value', 'TEST');

function openNewWindow() {
var w = window.open("childwindow");
}

Child Window:
var v = window.opener.document.getElementById("test");
alert(v);

The first problem is that the alert(v) in Child window returns a null. It seems like v is not delivered from parent window to the child window. Also, the parent window is reloaded when I click the button which triggers openNewWindow function in parent window.

I have no idea of that problems. Any suggestion is very welcomed.

Thanks!
Jian

Sup3rkirby

Is here any way you could share more of your code related to this? Just based on what you've shared I can't seem to replicate your issue.

Since your snippets are out of context it's hard to know what order these things are called in and how everything executes as a whole but I am curious as to when the <input> element with the ID of test is created (in relation to everything else). Since the element is dynamically added to the page and you say the page gets refreshed, if the element is not added back to the page (or the page is reloaded too soon) the element will not exist when the child window tries to call it. Again I'm not sure if this is the case but it would certainly cause your issue.

Jian

Hi Sup3rkirby,

Thank you very much for your help.

The parent window reloading problem is gone. But the data from parent window still can not be delivered to child window. More code snippet is as following:

Parent Window:
<html>
<head>
<script type="text/javascript">
function load() {
var html = document.createElement("form");
html.setAttribute(''onsubmit', openChild()');
var elem = document.createElement("input");
elem.setAttribute('id', 'name');
elem.setAttribute('value', 'test');
html.appendChild(elem);
document.getElementById("addtable").innerHTML = html;
}
function openChild() {
var w = window.open("test_child.html");
}
</script>
</head>
<body onload="load()">
<div id="addtable"></div>
</body>
</html>

Child Window:
<html>
<head>
<script type="text/javascript">
var v = window.opener.document.getElementById("elem");
alert(v);
</script>
</head>
<body>
</body>
</html>

The result of alert(v) in child window is still null. Please give some suggestions. Thanks!

Sup3rkirby

This is just a quick look but I'm thinking it's because you don't add your newly created form to the document. Instead you try to place it inside of the .innerHTML property, which won't work from elements created with .createElement(). Try replacing

document.getElementById("addtable").innerHTML = html;

with

document.getElementById("addtable").appendChild(html);

Jian

Hi Sup3rkirby,

Thank you very much for the reply. It really helps.
I am sorry for some misleading of the code snippet because I want to demonstrate the problem in the simply way. In my real project, I use google map infowindow to connect map marker and popup form.

var infoWindow;
infoWindow = new google.maps.InfoWinfow;

function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setcontent(html);
infoWindow.open(map, marker);
});
}

The google map infoWindow accepts string and DOM. It only has infoWindow.setcontent(html). It doesn't have API like infoWindow.append(html). I may need to look for postMessage for data passing between parent-child window, or google map customer layer for passing data. Please give some advices. Thanks in advance!

Sup3rkirby

If you've ever used the developer console in a browser it can be vital in cases like this. Press F12 in your browser and for this I'd jump on to the 'console' tab.

The first thing I would check is if you can get the element directly in the parent window. So instead of checking:

var v = window.opener.document.getElementById("elem");

You can just type 'document.getElementById("elem");' in the console area while on the parent window to see if it returns a valid html element object. If so then the element you are trying to get definitely exist and the problem is elsewhere in passing the data.

If that didn't solve your problem you can try some more in-depth debugging. You could first go to the child window, open up your developer console and type 'window.opener;' This should return the parent window object (which you can expand to view all of the global variables and functions). On a similar note you could try going to the parent window and making a new variable, for example 'var $test = "Hello World!";' and then going to your child window console and trying to access 'window.opener.$test;' to see if there is a value. If so we're on the right track. You can even try sending commands like alert() to the parent window (or vice versa) to ensure the two windows are linked and can communicate data properly in this situation.

Lastly, try getElementById() on a different element. See if it's possible to get any element from the parent page (or vice versa). Since you are doing this through a framework/API it's hard for me to know exactly what the API allows and preserves. There are many APIs out there that reduce native functionality in light of securing their own API and code, as well as ensuring security, etc. etc.

Jian

Hi Sup3rkirby,

Thank you very much for your help. I really appreciate it.

Also, I tried postMessage to pass data between parent window to child window but it doesn't work. The code snippet are as following. In order to simplify the test, I don't use google map on these small programs.

Parent Window:
<html>
<head>
<script type="text/javascript">
function initialize() {
var html = "<table>" +
"<tr><td>Name:</td><td><input type='text' id='name' value=name></td></tr>" +
"<tr><td></td><td><input type='button' value=Save' onclick='SaveData()'/></td></tr>";
document.getElementById("addtable").innerHTML = html;
}

function SaveData() {
var w = window.open("test_child.html");
w.postMessage("test", "http://localhost/test_child.html");
}
</script>
</head>
<body onload="initialize()">
<div>id="addtable"></div>
</body>
</html>

The child window :
<html>
<head>
<script type="text/javascript">
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
alert("ok?");
var v = event.data;
}
</script>
</head>
<body>
</body>
</html>

When I click the Save button in the table of parent window, the child window is opened. But the data is not delivered. The alert("ok?") does not appear.So it looks like the message in parent window doesn't send to child window. I use the firefox. I will use debugger console you mentioned and try to find the bugs. Thanks again!