stackoom
  简体   繁体   中英

How to add DOM element script to head section?

 原文  2013-09-13 11:12:00  9   13    javascript/ jquery/ html/ dom

Question

I want to add DOM element to head section of HTML. jQuery does not allow adding DOM element script to the head section and they execute instead, Reference .

I want to add script tags and write a script within <head> section.

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

Something like this with functions. I tried jQuery and javascript\, but it does not work.

Please tell me how to add and write script to head by jQuery or javascript.

I tired the javascript to add DOM element, but it does not work with .innerHTML() to write to head. I am using jQuery 2.0.3 and jQuery UI 1.10.3.

I want to add base64 encoded script to head section. I use base64 decoder js like this to decode the javascript and then put on the head section.

//Edited
It will be

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

To fit an encoded script and the addition in one javascript file. I want to use base64.js or some other decoder javascript files for browsers does not accept atob() .

13 answers

solution1
 77  2013-09-13 11:14:36

try this

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

document.head.appendChild(script);

solution2
 17  2017-10-26 18:17:57

If injecting multiple script tags in the head like this with mix of local and remote script files a situation may arise where the local scripts that are dependent on external scripts (such as loading jQuery from googleapis) will have errors because the external scripts may not be loaded before the local ones are.

So something like this would have a problem: ("jQuery is not defined" in 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);

Of course this situation is what the .onload() is for, but if multiple scripts are being loaded that can be cumbersome.

As a resolution to this situation, I put together this function that will keep a queue of scripts to be loaded, loading each subsequent item after the previous finishes, and returns a Promise that resolves when the script (or the last script in the queue if no parameter) is done loading.

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

With this adding scripts in order ensuring the previous are done before staring the next can be done like...

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

Or load the script and use the return Promise to do work when it's complete...

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

solution3
 11  2015-12-15 21:33:08

try out :: 

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

solution4
 8  2015-12-15 01:04:24

As per the author, they want to create a script in the head, not a link to a script file. Also, to avoid complications from jQuery (which provides little useful functionality in this case), vanilla javascript is likely the better option.

That may possibly be done as such:

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

Some clarification to those who may be confused on why this works: All code in the webpage is text. Text is the most fundamental type in a web page. The browser simply starts processing through the text, following its rules, until it reaches the end (this includes loopbacks, recursion, etc.)

For this to work, the script that makes this tag must also be in the header. The browser, when processing, will hit this code before reaching the end of the header, append the script you want onto the header, and then reach it later as it continues to process. If you had a reliable end footer, you could change out 'head' for 'footer' or similar, but considering the most reliable across sites that have scripts is the existence of the header tag, that makes it the most useful option in this case.

solution5
 4  2017-02-14 12:09:43

Best solution I've found:

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

solution6
 3  2013-09-13 11:23:29

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

But in that case script will not be executed and functions will be not accessible in global namespase. To use code in <script> you need do as in you question

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

solution7
 2  2015-05-12 23:43:26

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:

eval(decoded);

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

solution8
 1  2013-09-13 11:16:00

you could do:

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

solution9
 1  2014-11-07 04:15:31

I use PHP as my serverside language, so the example i will write in it - but i'm sure there is a method in your server side as well.

Just have your serverside language add it from a variable. w/ php something like that would go as follows.

Do note, that this will only work if the script is loaded with the page load. If you want to load it dynamically, this solution will not help you.

PHP

HTML 

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

In Summary: Decode with serverside and put it in your HTML using the server language.

solution10
 1  2019-02-04 21:03:14

Here is a safe and reusable function for adding script to head section if its not already exist there.

see working example here: 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>

solution11
 1  2020-04-07 07:06:16

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

solution12
 1  2021-12-01 02:11:22

If you want to add a script tag with some script inside, use

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

solution13
 1  2022-05-30 15:38:26

You can directly use a " Data URL ". Using the data in your example:

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

This way, you can skip loading base64.js and directly evaluate the base64 encoded script.

solution14
 -1  2021-01-13 11:29:25

I want to add DOM element to head section of HTML. jQuery does not allow adding DOM element script to the head section and they execute instead, Reference .

I want to add script tags and write a script within <head> section.

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

Something like this with functions. I tried jQuery and javascript\\, but it does not work.

Please tell me how to add and write script to head by jQuery or javascript.

I tired the javascript to add DOM element, but it does not work with .innerHTML() to write to head. I am using jQuery 2.0.3 and jQuery UI 1.10.3.

I want to add base64 encoded script to head section. I use base64 decoder js like this to decode the javascript and then put on the head section.

//Edited
It will be

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

To fit an encoded script and the addition in one javascript file. I want to use base64.js or some other decoder javascript files for browsers does not accept atob() .

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to add a script tag to the head section after a specific script tag How load script tag as DOM element and run as if it was placed in head tag How to add script tag in head section to wordpress theme in cpanel? How to add external <script> to <head> section for all mediawiki pages? How to attach element to head DOM? Add a dom element containing <script> How can I add javascript to the head of an html document to listen for a click on an element not yet added to the DOM? How to add DOM element where where the inline script is located How to add a <script> element to the DOM and execute its code? How to load or not a JS script (into the head section) based on screen resolution?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM