Question

我正在尝试将脚本添加到页面的head标签中。我看到我试图在body标签中添加的代码，但它没有显示在head标签中。

$(document).load(function() {
   $('<script>console.log("hi");</' + 'script>').appendTo("head")
});

我发现<body>中已添加此内容，但我在<head>中未看到此内容。

我尝试了append，appendTo和document.ready以及document.load函数的变体。到目前为止，这些都没有。

在我发布之前，我经历了类似线程的cpuple。我似乎没有解决我的问题

Answer 1

您可能需要做的一件事是将</转义为<\/

如果它是一个内联脚本，你可以尝试只添加一个setTimeout。

Answer 2

尝试以下功能：

(function (src) {
    var tagName = 'script', script = document.createElement(tagName);
    script.src = src;
    var elm = document.getElementsByTagName(tagName)[0];
    elm.parentNode.insertBefore(script, elm);
})('SCRIPT.SRC.HERE.js');

这将创建一个动态script标记，并在第一个script标记之前添加它。虽然如果你的script内没有head个标签，它就不会以你想要的方式工作。在这种情况下，您可以使用以下函数：

(function (src) {
    var tagName = 'script', script = document.createElement(tagName);
    script.src = src;
    var head = document.getElementsByTagName('head')[0];
    head.insertBefore(script, head.childNodes[0]);
})('SCRIPT.SRC.HERE.js');

这将直接获取head标记内的第一个元素，并在其前面添加新脚本。

Answer 3

document不会触发“加载”事件 - 或者如果它发生，它是来自其他加载的冒泡事件（如另一个脚本或图像文件）。尝试将document更改为window：

http://jsfiddle.net/5bhmwyrx/3/

$(window).load(function() {
   var script = $('<script>console.log("hi");</' + 'script>').appendTo(document.head);
   console.log("Script was appended to", script[0].parentNode.nodeName);
   //-> Script was appended to HEAD
});

$(document).load(function() {
   console.log("You should never see this");
});

document.onload = function () {
    console.log("You should not see this in modern browsers");
};

动态添加JS代码到head标记

3 个答案: