使用window.open将数据从父级传递到子级时，为什么会显示“无法读取未定义的属性”元素”？

Question

Bear with me, I've new to Javascript.

Here's my parent script:

var title = document.title;
var url = window.location.href;
var popForm;

function get_elements() {
    formObject = popForm.document.forms["link_form"];
    formObject.elements["id_title"].value = title;
    formObject.elements["id_url"].value = url;
    }

function bookmark() {

    popForm = window.open("form.html","aWindow","height=500,width=400");
    popForm.window.onload=get_elements()

    }

And my child just look slike this:

Title:</br>     
<input id="id_title" type="text" name="title" maxlength="50" />
</p>
Description:</br>
<textarea id="id_descrip" rows="10" cols="40" name="descrip"></textarea>
</p>
Url: <input id="id_url" type="text" name="url" maxlength="100" />
</p>
<input type="submit" value="Submit" />

I'm trying to create a little 'share' bookmarklet but cannot pass the data from the parent document to the popup's elements. The error in Chrome's console is Uncaught TypeError: Cannot read property 'elements' of undefined

What am I missing?!

Answer 1

popForm.window.onload=get_elements();

^ This is executing get_elements, not assigning it to the onload event.

popForm.window.onload=get_elements;

^ This is how you assign a function to the onload handler, but this is something you would do in the head of a document, not as you are trying to do.

popForm = window.open("form.html","aWindow","height=500,width=400");
popForm.window.onload = get_elements;

^ In this code you have a race condition. In some cases popForm.window will be loaded by the 1st line before the 2nd line is executed. The onload event will only fire once, so if you don't assign the handler before it fires, the 2nd line useless. In other cases popForm.window will not even exist yet when the 2nd line executes, making it impossible to assign a function to the onload event handler.

The normal method of handling this situation, if you have control over the contents within the child window, is to put this code inside the child:

formObject = document.forms["link_form"];
formObject.elements["id_title"].value = window.opener.title;
formObject.elements["id_url"].value = window.opener.url;

If you do not have control over the contents of the child window, you need to wait until the document within the iframe has fully loaded. There is no way to know this from the parent except to keep checking over and over. Use code like below.

popForm = window.open("form.html","aWindow","height=500,width=400");
function waitForChild() {
    if (! popForm.window ) setTimeout(waitForChild, 1000);
    else get_elements();
}
waitForChild();

Answer 2

Passing a function means not calling it:

popForm.window.onload = get_elements; // no parens

Currently you're calling the function and assigning the return value ( undefined ). popForm has not been loaded at that time so popForm.document.forms is empty.