Question

我有两个HTML文件，FirstWindow和SecondWindow。 FirstWindow将FirstWindowJS.js作为其脚本，SecondWindow将SecondWindowJS.js作为其脚本。

通过FirstWindowJS.js，我打开SecondWindow.html。但是，我无法为它创建元素。这是代码和问题 -

FirstWindow.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>FirstWindow</title>
</head>
<body>
<script type="text/javascript" src="FirstWindowJS.js"></script>
</body>
</html>

SecondWindow.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>SecondWindow</title>
</head>
<body>
<script type="text/javascript" src="SecondWindowJS.js"></script>
</body>
</html>

FirstWindowJS.js

main();

function main()
{
    var myWindow = window.open("SecondWindow.html", "My Window", 
    "resizable=0,width=700,height=600");

    var e = myWindow.document.createElement("currentUserElement");
    e.setAttribute("id", "currentUserElement");
    e.setAttribute("value","John");
}

SecondWindowJS.js

main();

function main()
{
     var e = document.getElementById("currentUserElement"); 
     var value = e.getAttribute("value");
     console.log("value = "+value);
}

我在SecondWindowJS.js中遇到的错误是 -

TypeError: e is null

为什么“e”为空？这是什么错误？

Answer 1

新窗口可能会在开启者脚本继续之前运行其JavaScript，但是您更有可能在尚未附加到文档的元素上使用getElementById。

myWindow.document.body.appendChild(e);

Answer 2

您创建了元素，但看起来并不像是将它添加到DOM中。在使用parentNode.appendChild()方法显式添加元素之前，DOM中不存在该元素。

在你的情况下，如果你只想将元素添加为body-element中的最后一个元素，它将看起来像这样：

function main()
{
    var myWindow = window.open("SecondWindow.html", "My Window", 
    "resizable=0,width=700,height=600");

    var e = myWindow.document.createElement("currentUserElement");
    e.setAttribute("id", "currentUserElement");
    e.setAttribute("value","John");
    // The element doesn't exist in the DOM until you explicitly add it
    myWindow.document.body.appendChild(e);
}

新窗口的document.createElement失败

2 个答案: