如何将 DOM 元素脚本添加到头部分

试试这个

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'url';    
document.head.appendChild(script);

如果像这样混合使用本地和远程脚本文件在头部注入多个脚本标签，可能会出现依赖于外部脚本的本地脚本（例如从googleapis加载jQuery）会出现错误的情况，因为外部脚本可能不会在本地脚本之前加载。

所以这样的事情会有一个问题：（jquery.some-plugin.js中的"jQuery is not defined"）。

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js";
head.appendChild(script);
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "/jquery.some-plugin.js";
head.appendChild(script);

当然，这种情况是 .onload（） 的用途，但是如果加载多个脚本，这可能会很麻烦。

为了解决这种情况，我把这个函数放在一起，该函数将保留要加载的脚本队列，在前面完成后加载每个后续项目，并返回一个 Promise，该 Promise 在脚本（如果没有参数，则为队列中的最后一个脚本）完成加载时解析。

load_script = function(src) {
    // Initialize scripts queue
    if( load_script.scripts === undefined ) {
        load_script.scripts = [];
        load_script.index = -1;
        load_script.loading = false;
        load_script.next = function() {
            if( load_script.loading ) return;
            // Load the next queue item
            load_script.loading = true;
            var item = load_script.scripts[++load_script.index];
            var head = document.getElementsByTagName('head')[0];
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = item.src;
            // When complete, start next item in queue and resolve this item's promise
            script.onload = () => {
                load_script.loading = false;
                if( load_script.index < load_script.scripts.length - 1 ) load_script.next();
                item.resolve();
            };
            head.appendChild(script);
        };
    };
    // Adding a script to the queue
    if( src ) {
        // Check if already added
        for(var i=0; i < load_script.scripts.length; i++) {
            if( load_script.scripts[i].src == src ) return load_script.scripts[i].promise;
        }
        // Add to the queue
        var item = { src: src };
        item.promise = new Promise(resolve => {item.resolve = resolve;});
        load_script.scripts.push(item);
        load_script.next();
    }
    // Return the promise of the last queue item
    return load_script.scripts[ load_script.scripts.length - 1 ].promise;
};

通过这个添加脚本，以确保在盯着下一个之前完成上一个可以像......

["https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js",
 "/jquery.some-plugin.js",
 "/dependant-on-plugin.js",
].forEach(load_script);

或者加载脚本并使用返回承诺在完成后完成工作......

load_script("some-script.js")
.then(function() {
    /* some-script.js is done loading */
});

试试 ：：

var script = document.createElement("script");
script.type="text/javascript";
script.innerHTML="alert('Hi!');";
document.getElementsByTagName('head')[0].appendChild(script);

根据作者的说法，他们希望在头部创建一个脚本，而不是指向脚本文件的链接。此外，为了避免jQuery的复杂性（在这种情况下它几乎没有提供有用的功能），vanilla javascript可能是更好的选择。

这可能是这样完成的：

var script = document.createTextNode("<script>alert('Hi!');</script>");   
document.getElementsByTagName('head')[0].appendChild(script);

向那些可能对为什么这样做感到困惑的人进行一些澄清：网页中的所有代码都是文本。文本是网页中最基本的类型。浏览器只是按照其规则开始处理文本，直到到达末尾（这包括环回、递归等）。

为此，制作此标记的脚本也必须位于标头中。浏览器在处理时，将在到达标头末尾之前点击此代码，将所需的脚本附加到标头上，然后在继续处理时稍后访问它。如果您有可靠的结束页脚，您可以将"head"更改为"页脚"或类似内容，但考虑到具有脚本的站点中最可靠的是标题标签的存在，这使其成为在这种情况下最有用的选项。

我找到的最佳解决方案：

AppendToHead('script', 'alert("hii"); ');
//or
AppendToHead('script', 'http://example.com/script.js');
//or
AppendToHead('style', '#myDiv{color:red;} ');
//or
AppendToHead('style', 'http://example.com/style.css');
function AppendToHead(elemntType, content) {
  // detect whether provided content is "link" (instead of inline codes)
  var Is_Link = content.split(/'r'n|'r|'n/).length <= 1 && content.indexOf("//") > -1 && content.indexOf(" ") <= -1;
  if (Is_Link) {
    if (elemntType == 'script') {
      var x = document.createElement('script');
      x.id = id;
      x.src = content;
      x.type = 'text/javascript';
    } else if (elemntType == 'style') {
      var x = document.createElement('link');
      x.id = id;
      x.href = content;
      x.type = 'text/css';
      x.rel = 'stylesheet';
    }
  } else {
    var x = document.createElement(elemntType);
    if (elemntType == 'script') {
      x.type = 'text/javascript';
      x.innerHTML = content;
    } else if (elemntType == 'style') {
      x.type = 'text/css';
      if (x.styleSheet) {
        x.styleSheet.cssText = content;
      } else {
        x.appendChild(document.createTextNode(content));
      }
    }
  }
  //append in head
  (document.head || document.getElementsByTagName('head')[0]).appendChild(x);
}

var script = $('<script type="text/javascript">// function </script>')
document.getElementsByTagName("head")[0].appendChild(script[0])

但在这种情况下，脚本将不会执行，并且函数将无法在全局名称中访问。要在<script>中使用代码，您需要像问题中一样操作

$('head').append(script);

这是一个古老的问题，我知道它专门询问在头部中添加脚本标签，但是根据 OP 的解释，他们实际上只是打算执行一些通过其他一些 JS 函数获得的 JS 代码。

这比在页面中添加脚本标记要简单得多。

只是：

eval(decoded);

Eval 将内联执行一串 JS，根本不需要将其添加到 DOM 中。

我认为在页面加载后真的不需要向 DOM 添加内联脚本标签。

更多信息在这里： http://www.w3schools.com/jsref/jsref_eval.asp

添加包含某些脚本的脚本标记，请使用

var script= document.createElement('script');
script.text = "alert('Hi!');";
document.head.appendChild(script);

做：

var scriptTag = document.createElement("script");
scriptTag.type = "text/javascript";
scriptTag.src = "script_source_here";
(document.getElementsByTagName("head")[0] || document.documentElement ).appendChild(scriptTag);

我使用 PHP 作为我的服务器端语言，所以我将在其中编写示例 - 但我确信您的服务器端也有一种方法。

只需让您的服务器端语言从变量中添加它即可。 w/php类似的东西如下。

请注意，这仅在脚本加载页面时有效。如果要动态加载它，此解决方案将无济于事。

.PHP

.HTML

<head>
    <script type="text/javascript"> <?php echo $decodedstring ?> </script>
</head>

总结：使用服务器端解码，并使用服务器语言将其放入HTML中。

这是一个安全且可重用的函数，用于将脚本添加到 head 部分（如果那里尚不存在）。

请参阅此处的工作示例：示例

<!DOCTYPE html>
<html>
  <head>
    <base href="/"/>
    <style>
    </style>
  </head>
  <body>
    <input type="button" id="" style='width:250px;height:50px;font-size:1.5em;' value="Add Script" onClick="addScript('myscript')"/>
    <script>
      function addScript(filename)
      {
        // house-keeping: if script is allready exist do nothing
        if(document.getElementsByTagName('head')[0].innerHTML.toString().includes(filename + ".js"))
        {
          alert("script is allready exist in head tag!")
        }
        else
        {
          // add the script
          loadScript('/',filename + ".js");
        }
      }
      function loadScript(baseurl,filename)
      {
        var node = document.createElement('script');
        node.src = baseurl + filename;
        document.getElementsByTagName('head')[0].appendChild(node);
        alert("script added");
      }
    </script>
  </body>
</html>

<script type="text/JavaScript">
     var script = document.createElement('SCRIPT');
    script.src = 'YOURJAVASCRIPTURL';
    document.getElementsByTagName('HEAD')[0].appendChild(script);
 </script>

您可以直接使用"数据网址"。使用示例中的数据：

var newScript = document.createElement("script");
newScript.type = "text/javascript";
document.head.appendChild(newScript);
newScript.src = "data:text/plain;base64,YWxlcnQoImhpIik7DQo="

这样，您可以跳过加载 base64.js直接评估 base64 编码脚本。