Question

我很好奇下面的例子中应该发生什么。大多数当前的浏览器（Firefox 5，Chrome 14，Opera 11.50）都会在文本上方添加iframe，但它是标准化的行为，还是将来可能发生变化的常见方式？

<!doctype html>
<html>
  <head>
    <title>Will the iframe be above or below the text?</title>
  </head>
  <body>
    <script>
      var e = document.createElement("iframe");
      document.body.appendChild(e);
    </script>
    <p>some text</p>
  </body>
</html>

Answer 1

这是标准化行为。

当脚本运行时，身体中还没有孩子。

Answer 2

来自MDN文档：https://developer.mozilla.org/En/AppendChild

将节点添加到指定父节点的子节点列表的末尾。

正如@Molecule指出的那样，脚本在树尚未构造时执行，因此该节点被附加在空列表中，因此最终成为第一个元素。它可能是特定于实现的。

Answer 3

首先执行该脚本，然后执行HTML元素<p>，这就是为什么首先获得iframe的原因。如果您想在底部放置iframe，请将脚本放在底部。所以是的，这是标准的事情。

Answer 4

只有在准备好后才能操作DOM树。因此，您需要在window的onload事件（任何浏览器）或DOMContentLoaded事件（非IE）中编写代码。

window.onload = function() {
    var e = document.createElement("iframe");
    document.body.appendChild(e);
}

body内部的脚本标签和appendChild的行为

4 个答案: