Dynamically add script tag with src that may include document write

Question

I want to dynamically include a script tag in a webpage however I have no control of it s src so src  source js  may look like this   document write   lt script type  text javascript  gt    document write  alert  hello world     document write   lt  script gt    document write   lt p gt goodbye world lt  p gt      Now ordinarily putting   lt script type  text javascript  src  source js  gt  lt  script gt     in the head works fine but is there any other way I can add source js dynamically using something like innerHTML   jsfiddle of what i ve tried

User · Answer

a nice little script I wrote to load multiple scripts:

function scriptLoader(scripts, callback) {

    var count = scripts.length;

    function urlCallback(url) {
        return function () {
            console.log(url + ' was loaded (' + --count + ' more scripts remaining).');
            if (count < 1) {
                callback();
            }
        };
    }

    function loadScript(url) {
        var s = document.createElement('script');
        s.setAttribute('src', url);
        s.onload = urlCallback(url);
        document.head.appendChild(s);
    }

    for (var script of scripts) {
        loadScript(script);
    }
};

usage:

scriptLoader(['a.js','b.js'], function() {
    // use code from a.js or b.js
});

User · Answer

When scripts are loaded asynchronously they cannot call document write  The calls will simply be ignored and a warning will be written to the console  You can use the following code to load the script dynamically  var scriptElm   document createElement  script    scriptElm src    source js   document body appendChild scriptElm    This approach works well only when your source belongs to a separate file  But if you have source code as inline functions which you want to load dynamically and want to add other attributes to the script tag  e g  class  type  etc   then the following snippet would help you  var scriptElm   document createElement  script    scriptElm setAttribute  class    class-name    var inlineCode   document createTextNode  alert  quot hello world quot      scriptElm appendChild inlineCode    document body appendChild scriptElm

User · Answer

This Is Work For Me    You Can Check It    x000D   x000D  var script tag   document createElement  script    x000D  script tag setAttribute  src   https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js    x000D  document head appendChild script tag   x000D  window onload   function     x000D      if  window jQuery      x000D             jQuery is loaded   x000D          alert  ADD SCRIPT TAG ON HEAD     x000D        else   x000D             jQuery is not loaded x000D          alert  DOESN T ADD SCRIPT TAG ON HEAD    x000D        x000D    x000D   x000D   x000D

User · Answer

Well  there are multiple ways you can include dynamic javascript  I use this one for many of the projects   var script   document createElement  script   script type    text javascript     Chrome Firefox  Opera  Safari 3  script onload   function    console log  Script is loaded       script src    file1 js   document getElementsByTagName  head   0  appendChild script     You can call create a universal function which can help you to load as many javascript files as needed  There is a full tutorial about this here   Inserting Dynamic Javascript the right way

User · Answer

the only way to do this is to replace document write with your own function which will append elements to the bottom of your page  It is pretty straight forward with jQuery   document write   function htmlToWrite        htmlToWrite  appendTo  body        If you have html coming to document write in chunks like the question example you ll need to buffer the htmlToWrite segments  Maybe something like this   document write    function       var buffer         var timer    return function htmlPieceToWrite        buffer    htmlPieceToWrite      clearTimeout timer       timer   setTimeout function             buffer  appendTo  body          buffer              0

User · Answer

I tried it by recursively appending each script  Note If your scripts are dependent one after other  then position will need to be in sync   Major Dependency should be in last in array so that initial scripts can use it   x000D   x000D  const scripts     https   www gstatic com firebasejs 6 2 0 firebase-storage js    https   www gstatic com firebasejs 6 2 0 firebase-firestore js    https   www gstatic com firebasejs 6 2 0 firebase-app js   x000D  let count   0 x000D   x000D     x000D   const recursivelyAddScript    script  cb    gt    x000D    const el   document createElement  script   x000D    el src   script x000D    if count  lt  scripts length    x000D      count    x000D      el onload   recursivelyAddScript scripts count   x000D      document body appendChild el  x000D      else   x000D      console log  All script loaded   x000D      return x000D      x000D    x000D    x000D    recursivelyAddScript scripts count   x000D   x000D   x000D

User · Answer

Loads scripts that depends on one another with the right order   Based on Satyam Pathak response  but fixed the onload  It was triggered before the script actually loaded    x000D   x000D  const scripts     https   www gstatic com firebasejs 6 2 0 firebase-storage js    https   www gstatic com firebasejs 6 2 0 firebase-firestore js    https   www gstatic com firebasejs 6 2 0 firebase-app js   x000D  let count   0 x000D   x000D     x000D   const recursivelyAddScript    script  cb    gt    x000D    const el   document createElement  script   x000D    el src   script x000D    if count  lt  scripts length    x000D      count    x000D      el onload        gt  recursivelyAddScript scripts count   x000D      document body appendChild el  x000D      else   x000D      console log  All script loaded   x000D      return x000D      x000D    x000D    x000D    recursivelyAddScript scripts count   x000D   x000D   x000D

User · Answer

A one-liner  no essential difference to the answers above though    document body appendChild document createElement  script    src    source js

User · Answer

You can try following code snippet   function addScript attribute  text  callback        var s   document createElement  script        for  var attr in attribute            s setAttribute attr  attribute attr    attribute attr    null            s innerHTML   text      s onload   callback      document body appendChild s      addScript       src   https   www google com       type   text javascript       async  null      lt div gt innerHTML lt  div gt    function

User · Answer

You can use the document createElement   function like this   function addScript  src       var s   document createElement   script       s setAttribute   src   src      document body appendChild  s

User · Answer

Here is a minified snippet  same code as Google Analytics and Facebook Pixel uses    function e s t   t e createElement s   async  0 t src  https   example com foo js   e e getElementsByTagName s  0   parentNode insertBefore t e   document  script      Replace https   example com foo js with your script path

User · Answer

var my awesome script   document createElement  script     my awesome script setAttribute  src   http   example com site js     document head appendChild my awesome script

User · Answer

There is the onload function  that could be called when the script has loaded successfully  function addScript  src  callback       var s   document createElement   script       s setAttribute   src   src      s onload callback    document body appendChild  s

[javascript] Dynamically add script tag with src that may include document.write

Examples related to javascript

Examples related to src

Examples related to document.write