Dynamically load JS inside JS

Question

I have a dynamic web page where  I need to import an external JS file  under an IF condition  inside another javascript file   I tried to search for a feasible solution but it didn t work   I have tried loading a JS file to the DOM using document createElement   but it also didn t work  Apparently the Js was loaded into the DOM but was not accessible in the current JS file   Solution in jQuery will also be fine

User · Answer

jQuery has   getScript        Description  Load a JavaScript file from the server using a GET HTTP request  then execute it

User · Answer

You may dynamically load the js inside the page not another js file   you have to use the getScript to load the js file     getScript  ajax test js   function data  textStatus  jqxhr    console log data     data returned console log textStatus     success console log jqxhr status     200 console log  Load was performed

User · Answer

The jQuery getScript   method is a shorthand of the Ajax function  with the dataType attribute    ajax   url  url dataType   script      If you want the scripts to be cachable  either use RequireJS or follow jQuery s example on extending the jQuery getScript method similar to the following   jQuery cachedScript   function  url  options           Allow user to set any option except for dataType  cache  and url   options     extend  options              dataType   script       cache  true      url  url             Use   ajax   since it is more flexible than   getScript      Return the jqXHR object so we can chain callbacks   return jQuery ajax  options           Usage   cachedScript   ajax test js    done function  script  textStatus       console log  textStatus          Reference  jQuery getScript     jQuery API Documentation

User · Answer

jQuery s   getScript   is buggy sometimes  so I use my own implementation of it like    jQuery loadScript   function  url  callback        jQuery ajax           url  url          dataType   script           success  callback          async  true             and use it like    if  typeof someObject     undefined     loadScript  url to someScript js   function          Stuff to do after someScript has loaded

User · Answer

I m recommend using requirejs with AMD javascript class files  good example of how to use it here   http   www sitepoint com understanding-requirejs-for-effective-javascript-module-loading

User · Answer

You can do it using JQuery     getScript  ajax test js   function data  textStatus  jqxhr      console log data     data returned   console log textStatus     success   console log jqxhr status     200   console log  Load was performed           this link should help  http   api jquery com jQuery getScript

User · Answer

I need to do this frequently  so I use this   var loadJS   function url  implementationCode  location         url is URL of external file  implementationCode is the code       to be called from the file  location is the location to        insert the  lt script gt  element      var scriptTag   document createElement  script        scriptTag src   url       scriptTag onload   implementationCode      scriptTag onreadystatechange   implementationCode       location appendChild scriptTag      var yourCodeToBeCalled   function      your code goes here   loadJS  yourcode js   yourCodeToBeCalled  document body     For more information  see this site How do I include a JavaScript file in another JavaScript file   which is the source of my function idea

User · Answer

You can use jQuery s   getScript   method to do it but if you want a more full feature one  yepnope js is your choice  It supports conditional loading of scripts and stylesheets and it s easy to use

User · Answer

To author my plugin I needed to load external scripts and styles inside a JS file  all of which were predefined  To achieve this  I did the following       this loadRequiredFiles   function  callback            var scripts     xx js    yy js            var styles     zz css            var filesloaded   0          var filestoload   scripts length   styles length          for  var i   0  i  lt  scripts length  i                  log  Loading script     scripts i                var script   document createElement  script                script type    text javascript               script src   scripts i               script onload   function                      log  Loaded script                    log this                   filesloaded         This means increment  i e  add one                  finishLoad                               document head appendChild script                     for  var i   0  i  lt  styles length  i                  log  Loading style     styles i                var style   document createElement  link                style rel    stylesheet               style href   styles i               style type    text css               style onload   function                      log  Loaded style                    log this                   filesloaded                    finishLoad                               document head appendChild style                     function finishLoad                 if  filesloaded     filestoload                    callback                                     More of the script in context   function myPlugin          var opts             verbose  false                                     lt  The options required to run this function     var self   this                 lt  An alias to  this  in case we re in jQuery                             lt  Constants required for this function to work      this getOptions   function             return opts              this setOptions   function options            for  var x in options                opts x    options x                                     brief Load the required files for this plugin         param  Function  callback A callback function to run when all files have been loaded             this loadRequiredFiles   function  callback            var scripts     xx js    yy js            var styles     zz css            var filesloaded   0          var filestoload   scripts length   styles length          for  var i   0  i  lt  scripts length  i                  log  Loading script     scripts i                var script   document createElement  script                script type    text javascript               script src   scripts i               script onload   function                      log  Loaded script                    log this                   filesloaded                    finishLoad                               document head appendChild script                     for  var i   0  i  lt  styles length  i                  log  Loading style     styles i                var style   document createElement  link                style rel    stylesheet               style href   styles i               style type    text css               style onload   function                      log  Loaded style                    log this                   filesloaded                    finishLoad                               document head appendChild style                     function finishLoad                 if  filesloaded     filestoload                    callback                                                    brief Enable user-controlled logging within this function         param  String  msg The message to log         param  Boolean  force True to log message even if user has set logging to false             function log msg  force            if  opts verbose    force                console log msg                                    brief Initialise this function             this init   function             self loadRequiredFiles self afterLoadRequiredFiles               this afterLoadRequiredFiles   function                 Do stuff

User · Answer

My guess is that in your DOM-only solution you did something like   var script   document createElement  script    script src   something    do stuff with the script   First of all  that won t work because the script is not added to the document tree  so it won t be loaded  Furthermore  even when you do  execution of javascript continues while the other script is loading  so its content will not be available to you until that script is fully loaded   You can listen to the script s load event  and do things with the results as you would  So   var script   document createElement  script    script onload   function            do stuff with the script    script src   something   document head appendChild script     or something of the likes

User · Answer

Here is a little lib to load javascript and CSS files dynamically   https   github com todotresde javascript-loader  I guess is usefull to load css and js files in order and dynamically   Support to extend to load any lib you want  and not just the main file  you can use it to load custom files   I E     lt html gt   lt head gt       lt script src    ajax googleapis com ajax libs jquery 1 10 2 jquery min js  gt  lt  script gt       lt script src  scripts javascript-loader js  type  text javascript  charset  utf-8   gt  lt  script gt           lt script type  text javascript  gt            function                  registerLib  threejs   test                function test                    console log THREE                              registerLib  tinymce   draw                function draw                    tinymce init  selector  textarea                                      lt  script gt   lt  head gt   lt body gt       lt textarea gt Your content here  lt  textarea gt   lt  body gt

User · Answer

Necromancing  I use this to load dependant scripts  it works with IE8  without adding any dependency on another  library like jQuery   var cScriptLoader    function          function cScriptLoader files                var  this   this          this log   function  t                        console log  quot ScriptLoader   quot    t                      this withNoCache   function  filename                        if  filename indexOf  quot   quot       -1                  filename     quot  no cache  quot    new Date   getTime                else                 filename     quot  amp no cache  quot    new Date   getTime                return filename                     this loadStyle   function  filename                           HTMLLinkElement             var link   document createElement  quot link quot                link rel    quot stylesheet quot               link type    quot text css quot               link href    this withNoCache filename                this log  Loading style     filename               link onload   function                                   this log  Loaded style  quot     filename     quot                                 link onerror   function                                   this log  Error loading style  quot     filename     quot                                  this m head appendChild link                      this loadScript   function  i                        var script   document createElement  script                script type    text javascript               script src    this withNoCache  this m js files i                var loadNextScript   function                                  if  i   1  lt   this m js files length                                         this loadScript i   1                                                script onload   function                                   this log  Loaded script  quot      this m js files i      quot                      loadNextScript                               script onerror   function                                   this log  Error loading script  quot      this m js files i      quot                      loadNextScript                                this log  Loading script  quot      this m js files i      quot                   this m head appendChild script                      this loadFiles   function                             this log this m css files                  this log this m js files               for  var i   0  i  lt   this m css files length    i                   this loadStyle  this m css files i                 this loadScript 0                      this m js files               this m css files               this m head   document getElementsByTagName  quot head quot   0              this m head   document head     IE9  only         function endsWith str  suffix                        if  str     null    suffix     null                  return false              return str indexOf suffix  str length - suffix length      -1                    for  var i   0  i  lt  files length    i                        if  endsWith files i    quot  css quot                                  this m css files push files i                              else if  endsWith files i    quot  js quot                                  this m js files push files i                              else                 this log  Error unknown filetype  quot     files i      quot                          return cScriptLoader        var ScriptLoader   new cScriptLoader   quot foo css quot    quot Scripts Script4 js quot    quot foobar css quot    quot Scripts Script1 js quot    quot Scripts Script2 js quot    quot Scripts Script3 js quot     ScriptLoader loadFiles     If you are interested in the typescript-version used to create this  class cScriptLoader       private m js files  string        private m css files  string        private m head HTMLHeadElement           private log    t any    gt                console log  quot ScriptLoader   quot    t                       constructor files  string              this m js files               this m css files               this m head   document getElementsByTagName  quot head quot   0              this m head   document head     IE9  only                           function endsWith str string  suffix string  boolean                        if str     null    suffix     null                  return false                               return str indexOf suffix  str length - suffix length      -1                                      for let i number   0  i  lt  files length    i                         if endsWith files i    quot  css quot                                  this m css files push files i                              else if endsWith files i    quot  js quot                                  this m js files push files i                              else                 this log  Error unknown filetype  quot     files i     quot                                             public withNoCache    filename string  string   gt                if filename indexOf  quot   quot       -1              filename     quot  no cache  quot    new Date   getTime            else             filename     quot  amp no cache  quot    new Date   getTime                         return filename                      public loadStyle    filename string    gt                   HTMLLinkElement         let link   document createElement  quot link quot            link rel    quot stylesheet quot           link type    quot text css quot           link href   this withNoCache filename                    this log  Loading style     filename           link onload        gt                        this log  Loaded style  quot     filename     quot                                               link onerror        gt                        this log  Error loading style  quot     filename     quot                                  this m head appendChild link                       public loadScript    i number    gt                 let script   document createElement  script            script type    text javascript           script src   this withNoCache this m js files i                     var loadNextScript        gt                         if  i   1  lt  this m js files length                                this loadScript i   1                                            script onload        gt                        this log  Loaded script  quot     this m js files i      quot                  loadNextScript                                         script onerror        gt                        this log  Error loading script  quot     this m js files i      quot                  loadNextScript                                         this log  Loading script  quot     this m js files i      quot              this m head appendChild script                  public loadFiles        gt                    this log this m css files              this log this m js files                    for let i number   0  i  lt  this m css files length    i              this loadStyle this m css files i                    this loadScript 0                  var ScriptLoader   new cScriptLoader   quot foo css quot    quot Scripts Script4 js quot    quot foobar css quot    quot Scripts Script1 js quot    quot Scripts Script2 js quot    quot Scripts Script3 js quot     ScriptLoader loadFiles     If it s to load a dynamic list of scripts  write the scripts into an attribute  such as data-main  e g   lt script src  quot scriptloader js quot  data-main  quot file1 js file2 js file3 js etc  quot   gt  lt  script gt   and do a element getAttribute  quot data-main quot   split      such as var target   document currentScript     function       var scripts   document getElementsByTagName  script         Note  this is for IE as IE doesn t support currentScript      this does not work if you have deferred loading with async      e g   lt script src  quot     quot  async  quot async quot   gt  lt  script gt       https   web archive org web 20180618155601 https   www w3schools com TAgs att script async asp   return scripts scripts length - 1          target getAttribute  quot data-main quot   split       to obtain the list

User · Answer

If you have many files with dependencies  use AMD RequireJS  http   requirejs org

[javascript] Dynamically load JS inside JS

Examples related to javascript

Examples related to jquery