如何将脚本标签插入头部标签的顶部/开头？

Posted 2023-03-11

技术标签:

【中文标题】如何将脚本标签插入头部标签的顶部/开头？【英文标题】：How do I insert a script tag in to the top/beginning of head tag? 【发布时间】：2012-10-10 08:52:54 【问题描述】：

我想在 head 标记中的所有其他脚本之前插入一个脚本标记。我将如何使用原生 javascript 做到这一点？

<head>
    //INSERT SCRIPT HERE
     <script type="text/javascript" src="common.js"></script>
     <script type="text/javascript" src="omni-controls.js"></script>
</head>

当我使用它时，它只是附加在头标签中的所有标签之后。

document.getElementsByTagName("head")[0].appendChild(script);

【问题讨论】：

这是什么原因？它不会改变现有脚本的执行顺序。为什么要在顶部插入呢？由于它是动态插入的，因此您可以假设其他脚本已经加载。因此，将其放在HEAD 标记的顶部并不重要。如果你必须，你可以使用insertBefore虽然我不明白这一点。我插入的脚本是 jquery，头部有一个脚本需要 jquery，我在控制台中收到一个错误，说“jquery 未定义”并且该脚本不会加载。跨度> @Justin 那么这将无济于事，您加载 jQuery 为时已晚，因为其他脚本未能找到它并停止运行。为什么不直接在没有javascript的情况下添加脚本标签？ 【参考方案1】：

var head = document.getElementsByTagName("head")[0]

head.insertBefore(script, head.firstChild);

【讨论】：

你可以解释我猜的代码，提供文档链接，描述它的工作原理......我没有 -1，只是猜测。 @sachleen：是的，可能就是这样。我认为像这样的一些代码实际上是自我记录的。仅供参考，这完成了 OP 的要求，但与使用 appendChild() 没有任何不同，因为其他脚本已经执行，因此在它们之前放置一个新脚本而不是在它们之后放置一个新脚本不要改变任何东西。我的猜测是 OP 认为这会为他们解决问题是错误的。 @TheZ, jfriend00：我确定这很可能是一个 X/Y 问题。我固执的部分喜欢直接回答问题，让他们忍受不问实际问题的结果。 @user1689607 哈哈，很公平，我也有这种感觉【参考方案2】：

获取<head>的firstChild，然后使用insertBefore。

这不会改变加载脚本的顺序（因为您将在解析其他脚本后将其插入到 DOM 中），因此这与仅使用 appendChild

【讨论】：

【参考方案3】：

document.head.insertBefore(script, document.head.firstElementChild);

【讨论】：

以上是关于如何将脚本标签插入头部标签的顶部/开头？的主要内容，如果未能解决你的问题，请参考以下文章