Question

我是JavaScript和HTML5的新手，今天我正在使用createHTMLDocument（），我遇到了一个令人沮丧的问题。我从Mozilla's site获得了以下代码段：

<script>
   function makeDocument() {
   var frame = document.getElementById("theFrame");

   var doc = document.implementation.createHTMLDocument("New Document");
   var p = doc.createElement("p");
   p.innerHTML = "This is a new paragraph.";

   try {
     doc.body.appendChild(p);
   } catch(e) {
     console.log(e);
   }

   var destDocument = frame.contentDocument;
   var srcNode = doc.documentElement;
   var newNode = destDocument.importNode(srcNode, true);

   destDocument.replaceChild(newNode, destDocument.documentElement);
   console.log(destDocument.readyState);
}
</script>
<body>
  <p>Click <a href="javascript:makeDocument()">here</a> to create a new document and insert it below.</p>
  <iframe id="theFrame" src="about:blank" />
</body>

它按预期工作。文本被放入doc中，预期的readyState，＃34; complete＆＃34;，被写入控制台。

然后我重新调整了代码，以便makeDocument在加载时自动运行，如下所示：

<div>
  <iframe id="frame" src="about:blank"> </iframe>
</div>

<script>
  function makeDocument() {
    var frame = document.getElementById("frame");

    var doc = document.implementation.createHTMLDocument("New Document");
    var p = doc.createElement("p");
    p.innerHTML = "This is a new paragraph.";

    try {
      doc.body.appendChild(p);
  } catch(e) {
      console.log(e);
    }

    var destDocument = frame.contentDocument;
    var srcNode = doc.documentElement;
    var newNode = destDocument.importNode(srcNode, true);

    destDocument.replaceChild(newNode, destDocument.documentElement);
    console.log(destDocument.readyState);
  }

  makeDocument();
</script>

但是当运行时，文本不会添加到文档中，文档的readyState是＆＃34;未初始化。＆＃34;我确定我犯了一些愚蠢的错误。有什么想法吗？

Answer 1

如果要调用操作DOM的javascript函数，则应使用onload事件处理程序。

尝试添加

<body onload="makeDocument()">

而不是直接在脚本标记中调用该函数。

浏览器是多线程的，因此即使脚本标记位于iframe定义之后，也无法保证DOM已完成加载。

createHTMLDocument（）没有初始化

1 个答案: