document.head, document.body 附加脚本

Question

我经常使用并看到推荐的 dom-access 结构，如下所示，用于动态向页面添加内容：

loader = document.createElement('script');
loader.src = "myurl.js";
document.getElementsByTagName('head')[0].appendChild(loader);

现在，偶然，我发现这在 Google chrome 中有效：

document.head.appendChild(loader);

再进行一点调查，我发现这有效，显然是交叉的-browser：

document.body.appendChild(loader);

所以我的主要问题是：是否有任何原因我不应该像这样将元素附加到 BODY 上？

另外，您认为 document.head 会得到更广泛的支持吗？

Answer 1

我不明白为什么在实践中将

至于 document.head，它是 HTML5 的一部分，显然已经在所有主要浏览器的最新版本中实现了（请参阅 http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-head）。

Answer 2

document.body 是 DOM 规范的一部分，我不明白为什么不使用它。但请注意这一点：

在包含内容的文档中，返回元素，在框架集文档中，返回最外层元素。

（来自 https://developer.mozilla.org/en/DOM/document.body)

document.head 目前没有在任何 DOM 规范中定义（显然我错了，请参阅 Daniel 的回答），所以您通常应该避免使用它。

Answer 3

我尝试实现这段代码并遇到了一些麻烦，所以想分享我的经验。

首先我尝试了这个：

<script>
loader = document.createElement('script');
loader.src = "script.js";
document.getElementsByTagName('head')[0].appendChild(loader);
</script>

在 script.js 文件中，我有如下代码：

// This javascript tries to include a special css doc in the html header if windowsize is smaller than my normal conditions.  
winWidth = document.etElementById() ? document.body.clientWidth : window.innerWidth; 
if(winWidth <= 1280) { document.write('<link rel="stylesheet" type="text/css" href="style/screen_less_1280x.css">'); } 

问题是，当我完成所有这些操作时，代码将无法工作。然而，一旦我将脚本加载器替换为以下内容，它就可以工作：

<script src="script.js"></script>

这对我有用，所以现在问题解决了，但我想了解这两者之间的区别接近。为什么一个有效而另一个无效？

更重要的是，在 script.js 中，我还有如下代码：

function OpenVideo(VideoSrcURL) {
window.location.href="#OpenModal";
document.getElementsByTagName('video')[0].src=VideoSrcURL;
document.getElementsByTagName('video')[0].play();}

无论我以哪种方式在 html 文件中获取脚本，该代码确实都能正常工作。

所以我的窗口大小调整脚本不起作用，但视频内容可以。因此我想知道行为的差异是否与“文档”对象有关......？也许“文档”引用的是 script.js 文件而不是 html 文件。

我不知道。我想我应该分享这个问题，以防它适用于其他人。

干杯。

Answer 4

目前给出的答案集中在两个不同的方面，并且都非常有用。

如果您对可移植性有要求，那么在不属于您所有权且无法控制 DOM 一致性的文档中，检查必须附加脚本的元素是否存在可能会很有用；这样，当 HEAD 部分尚未显式创建时，它也将起作用：

var script = document.createElement('script');
var parent = document.getElementsByTagName('head').item(0) || document.documentElement;
parent.appendChild(script);

除了 CORS 策略和其他易于检测的逻辑错误之外，我没有看到此 DOM 操作任务应该失败的情况，因此检查 document在我看来，.body 作为后备是没有必要的。

正如其他用户也概述的那样，在发布问题时，document.head 尚未得到广泛支持，因为它是 HTML5 规范，而 document.body 是，这就是为什么您看到后者在所有浏览器上运行的原因。

所以你可以通过以下方式获得 HEAD：

document.head || document.getElementsByTagName('head').item(0)

但我认为它不是很有用，因为后者永远不会出错，并且是一个可读且标准的 DOM 查询，除非你发现 document.head 从性能角度来看更快。

我可以看到这种形式的另一个可能的优点是代码从旧的 JavaScript 转换为更现代的 HTML5 兼容代码，简洁且更具可读性。

如果兼容性是必须的，您可以使用强制可移植性的库采用的技巧（例如 Google、Yandex 等的解决方案）：

var parent = document.getElementsByTagName('head')[0] || document.documentElement.firstChild;
parent.appendChild(script);

这样，在不太可能的情况下，HEAD 元素不存在，而 BODY（或其他元素）不存在确实如此，您一定要将脚本附加到其中。

我还添加了一个有用的位：当设置 src 属性并将其附加到 DOM 时，脚本源的 HTTP 请求将从浏览器发送。无论这两个条件以什么顺序满足，这两个事件中的最后一个都会导致调度 HTTP 请求。