我找到的最佳解决方案：

Question

我想将DOM元素添加到HTML的head部分。 jQuery不允许将DOM元素脚本添加到head部分，而是执行Reference。

我想添加script代码并在<head>部分内编写脚本。

var script = '<script type="text/javascript"> //function </script>'
$('head').append(script);

有这样的功能。我尝试过jQuery和javascript \，但它不起作用。

请告诉我如何通过jQuery或javascript添加和编写script。

我厌倦了添加DOM元素的javascript，但它不能与.innerHTML()一起写入头部。我正在使用jQuery 2.0.3和jQuery UI 1.10.3。

我想将base64编码脚本添加到head部分。我使用像this这样的base64解码器j来解码javascript然后放在head部分。

//被修改
它将是

$.getScript('base64.js');
var encoded = "YWxlcnQoImhpIik7DQo="; //More text
var decoded = decodeString(encoded);
var script = '<script type="text/javascript">' +decoded + '</script>';
$('head').append(script);

使编码脚本和添加在一个javascript文件中。我想使用base64.js或其他一些解码器javascript文件，浏览器不接受atob()。

Answer 1

试试这个

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

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

Answer 2

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

所以这样的事情会有问题:(＆＃34; jQuery未定义＆＃34;在jquery.some-plugin.js中）。

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，它在脚本（或最后一个脚本）中解析队列，如果没有参数）完成加载。

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);

或者加载脚本并使用返回Promise在完成后继续工作......

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

Answer 3

试试::

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

Answer 4

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

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

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

Answer 5

This is an old question, and I know its asking specifically about adding a script tag into the head, however based on the OPs explanation they actually just intend to execute some JS code which has been obtained via some other JS function.

This is much simpler than adding a script tag into the page.

Simply:

-build-setup:
[getbuildtools] Using latest Build Tools: 22.0.0
     [echo] Resolving Build Target for OpsVedaMobile...
[gettarget] Project Target:   Android 5.0.1
[gettarget] API level:        21

Eval will execute a string of JS in-line, without any need to add it to the DOM at all.

I don't think there's ever really a need to add an in-line script tag to the DOM after page load.

More info here: http://www.w3schools.com/jsref/jsref_eval.asp

Answer 6

根据作者的说法，他们希望在头部创建一个脚本，而不是脚本文件的链接。

这可能是这样做的：

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

Answer 7

我找到的最佳解决方案：

Append_To_Head('script', ' alert("hii"); ');
//or
Append_To_Head('script', 'http://example.com/script.js ');
//or
Append_To_Head('style',  ' #myDiv{color:red;} ');
//or
Append_To_Head('style',  'http://example.com/style.css ');



function Append_To_Head(elemntType, content){
    // if provided content is "link" or "inline codes"
    var Is_Link = content.split(/\r\n|\r|\n/).length <= 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);
}

Answer 8

这是一个安全且可重用的功能，用于将脚本添加到标头区域（如果尚不存在的话）。

在此处查看工作示例：Example

<!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>

Answer 9

你可以这样做：

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

Answer 10

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

让你的服务器端语言从变量中添加它。 w / php之类的内容如下：

请注意，这仅在脚本加载页面加载时才有效。如果您想动态加载它，此解决方案将无法帮助您。

PHP

HTML

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

摘要：使用serveride解码并使用服务器语言将其放入HTML中。

Answer 11

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

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

11 个答案:

我找到的最佳解决方案：