Dynamically load a JavaScript file

Question

How can you reliably and dynamically load a JavaScript file   This will can be used to implement a module or component that when  initialized  the component will dynamically load all needed JavaScript library scripts on demand   The client that uses the component isn t required to load all the library script files  and manually insert  lt script gt  tags into their web page  that implement this component - just the  main  component script file   How do mainstream JavaScript libraries accomplish this  Prototype  jQuery  etc    Do these tools merge multiple JavaScript files into a single redistributable  build  version of a script file   Or do they do any dynamic loading of ancillary  library  scripts   An addition to this question  is there a way to handle the event after a dynamically included JavaScript file is loaded   Prototype has document observe for document-wide events  Example   document observe  dom loaded   function          initially hide all containers for tab content       div tabcontent   invoke  hide          What are the available events for a script element

User · Answer

I am lost in all these samples but today I needed to load an external  js from my main  js and I did this   document write   lt script src  https   www google com recaptcha api js  gt  lt  script gt

User · Answer

If you want a SYNC script loading  you need to add script text directly to HTML HEAD tag  Adding it as  will trigger an ASYNC load  To load script text from external file synchronously  use XHR  Below a quick sample  it is using parts of other answers in this and other posts      sample requires an additional method for array prototype     if  Array prototype contains     undefined    Array prototype contains   function  obj        var i   this length      while  i--    if  this i      obj  return true        return false           define object that will wrap our logic   var ScriptLoader     LoadedFiles       LoadFile  function  url        var self   this      if  this LoadedFiles contains url   return       var xhr   new XMLHttpRequest        xhr onload   function              if  xhr readyState     4                if  xhr status     200                    self LoadedFiles push url                   self AddScript xhr responseText                 else                   if  console  console error xhr statusText                                      xhr open  GET   url  false    last parameter defines if call is async or not       xhr send null       AddScript  function  code        var oNew   document createElement  script        oNew type    text javascript       oNew textContent   code      document getElementsByTagName  head   0  appendChild oNew           Load script file  ScriptLoader will check if you try to load a file that has already been loaded  this check might be better  but I m lazy      ScriptLoader LoadFile  Scripts jquery-2 0 1 min js    ScriptLoader LoadFile  Scripts jquery-2 0 1 min js      this will be executed right after upper lines  It requires jquery to execute  It requires a HTML input with id  tb1      function      alert     tb1   val

User · Answer

Something like this      lt script gt         document  ready function                  body   append   lt script src  https   maps googleapis com maps api js key KEY amp libraries places amp callback getCurrentPickupLocation  async defer gt  lt   script gt               lt  script gt

User · Answer

There s a new proposed ECMA standard called dynamic import  recently incorporated into Chrome and Safari     const moduleSpecifier      dir someModule js    import moduleSpecifier      then someModule   gt  someModule foo        executes foo method in someModule

User · Answer

jquery resolved this for me with its  append   function - used this to load the complete jquery ui package        FILENAME   project library js    USAGE      loads any javascript library         var dirPath       js        var library     functions js   swfobject js   jquery jeditable mini js   jquery-ui-1 8 8 custom min js   ui jquery ui core min js   ui jquery ui widget min js   ui jquery ui position min js   ui jquery ui button min js   ui jquery ui mouse min js   ui jquery ui dialog min js   ui jquery effects core min js   ui jquery effects blind min js   ui jquery effects fade min js   ui jquery effects slide min js   ui jquery effects transfer min js         for var script in library              head   append   lt script type  text javascript  src      dirPath   library script       gt  lt  script gt             To Use - in the head of your html php etc after you import jquery js you would just include this one file like so to load in the entirety of your library appending it to the head      lt script type  text javascript  src  project library js  gt  lt  script gt

User · Answer

For those of you  who love one-liners   import    myscript js      Chances are you might get an error  like      Access to script at  http        myscript js  from origin    http   127 0 0 1  has been blocked by CORS policy  No    Access-Control-Allow-Origin  header is present on the requested   resource    In which case  you can fallback to   fetch  myscript js   then r   gt  r text    then t   gt  new Function t

User · Answer

all the major javascript libraries like jscript  prototype  YUI have support for loading script files  For example  in YUI  after loading the core you can do the following to load the calendar control  var loader   new YAHOO util YUILoader        require    calendar       what components       base         build     where do they live         filter   DEBUG      use debug versions  or apply some                           some other filter         loadOptional  true    load all optional dependencies         onSuccess is the function that YUI Loader       should call when all components are successfully loaded      onSuccess  function               Once the YUI Calendar Control and dependencies are on           the page  we ll verify that our target container is            available in the DOM and then instantiate a default           calendar into it          YAHOO util Event onAvailable  calendar container   function                 var myCal   new YAHOO widget Calendar  mycal id    calendar container                myCal render                               should a failure occur  the onFailure function will be executed     onFailure  function o            alert  error      YAHOO lang dump o                    Calculate the dependency and insert the required scripts and css resources    into the document loader insert

User · Answer

Here is a simple one with callback and IE support   function loadScript url  callback         var script   document createElement  script       script type    text javascript        if  script readyState      IE         script onreadystatechange   function                  if  script readyState     loaded     script readyState     complete                     script onreadystatechange   null                  callback                                   else     Others         script onload   function                  callback                          script src   url      document getElementsByTagName  head   0  appendChild script      loadScript  https   ajax googleapis com ajax libs jquery 1 6 1 jquery min js   function              jQuery loaded      console log  jquery loaded

User · Answer

Here a simple example for a function to load JS files  Relevant points    you don t need jQuery  so you may use this initially to load also the jQuery js file it is async with callback it ensures it loads only once  as it keeps an enclosure with the record of loaded urls  thus avoiding usage of network contrary to jQuery   ajax or   getScript you can use nonces  solving thus issues with CSP unsafe-inline  Just use the property script nonce   var getScriptOnce   function          var scriptArray         array of urls  closure         function to defer loading of script     return function  url  callback             the array doesn t have such url         if  scriptArray indexOf url      -1                var script document createElement  script                script src url              var head document getElementsByTagName  head   0                   done false               script onload script onreadystatechange   function                    if    done  amp  amp    this readyState    this readyState     loaded     this readyState     complete                           done true                      if  typeof callback      function                             callback                                              script onload   script onreadystatechange   null                      head removeChild script                        scriptArray push url                                                 head appendChild script                             Now you use it simply by  getScriptOnce  url of your JS file js

User · Answer

I know my answer is bit late for this question  but  here is a great article in www html5rocks com - Deep dive into the murky waters of script loading    In that article it is concluded that in regards of browser support  the best way to dynamically load JavaScript file without blocking content rendering is the following way     Considering you ve four scripts named script1 js  script2 js  script3 js  script4 js then you can do it with applying async   false         script1 js      script2 js      script3 js      script4 js    forEach function src      var script   document createElement  script      script src   src    script async   false    document head appendChild script         Now  Spec says  Download together  execute in order as soon as all download   Firefox  lt  3 6  Opera says  I have no idea what this    async    thing is  but it just so happens I execute scripts added via JS in the order they   re added   Safari 5 0 says  I understand    async     but don   t understand setting it to    false    with JS  I   ll execute your scripts as soon as they land  in whatever order   IE  lt  10 says  No idea about    async     but there is a workaround using    onreadystatechange      Everything else says  I   m your friend  we   re going to do this by the book   Now  the full code with IE  lt  10 workaround    var scripts        script1 js      script2 js      script3 js      script4 js     var src  var script  var pendingScripts       var firstScript   document scripts 0       Watch scripts load in IE function stateChange          Execute as many scripts in order as we can   var pendingScript    while  pendingScripts 0   amp  amp  pendingScripts 0  readyState     loaded         pendingScript   pendingScripts shift           avoid future loading events from this script  eg  if src changes      pendingScript onreadystatechange   null         can t just appendChild  old IE bug if element isn t closed     firstScript parentNode insertBefore pendingScript  firstScript             loop through our script urls while  src   scripts shift        if   async  in firstScript       modern browsers     script   document createElement  script        script async   false      script src   src      document head appendChild script         else if  firstScript readyState       IE lt 10        create a script and add it to our todo pile     script   document createElement  script        pendingScripts push script          listen for state changes     script onreadystatechange   stateChange         must set src AFTER adding onreadystatechange listener        else we   ll miss the loaded event for cached scripts     script src   src        else      fall back to defer     document write   lt script src      src      defer gt  lt     script gt             A few tricks and minification later  it   s 362 bytes     function e t r  function n   for  d 0  amp  amp  loaded   d 0  f   c d shift   c o   i parentNode insertBefore c i  for var s a c d    i e scripts 0  o  onreadystatechange  f  readyState  s r shift    a e createElement t   async in i  a async  1 e head appendChild a   i f   d push a  a o  n  e write   lt   t   src    s    defer gt  lt    t   gt    a src s  document  script         other-domain com 1 js      2 js

User · Answer

If you have jQuery loaded already  you should use   getScript     This has an advantage over the other answers here in that you have a built in callback function  to guarantee the script is loaded before the dependant code runs  and you can control caching

User · Answer

An absurd one-liner  for those who think that loading a js library shouldn t take more than one line of code  P  await new Promise  resolve  reject    gt   let js   document createElement  script    js src  mylibrary js   js onload resolve  js onerror reject  document body appendChild js       Obviously if the script you want to import is a module  you can use the import      function

User · Answer

does anyone have a better way    I think just adding the script to the body would be easier then adding it to the last node on the page   How about this   function include url      var s   document createElement  script      s setAttribute  type    text javascript      s setAttribute  src   url     document body appendChild s

User · Answer

Keep it nice  short  simple  and maintainable         3rd party plugins   script  don t forget the full path is necessary  var FULL PATH       s         FULL PATH    plugins script js          Script example     FULL PATH    plugins jquery 1 2 js      jQuery Library      FULL PATH    plugins crypto-js hmac-sha1 js           CryptoJS     FULL PATH    plugins crypto-js enc-base64-min js      CryptoJS     function load url        var ajax   new XMLHttpRequest        ajax open  GET   url  false       ajax onreadystatechange   function                  var script   ajax response    ajax responseText          if  ajax readyState     4                        switch ajax status                                case 200                      eval apply  window   script                         console log  library loaded     url                       break                  default                      console log  ERROR  library not loaded     url                                      ajax send null          initialize a single load  load  plugins script js        initialize a full load of scripts if  s length  gt  0        for  i   0  i  lt  s length  i                  load s i              This code is simply a short functional example that could require additional feature functionality for full support on any  or given  platform

User · Answer

I have tweaked some of the above post with working example  Here we can give css and js in same array also     document  ready function     if  Array prototype contains     undefined    Array prototype contains   function  obj        var i   this length      while  i--    if  this i      obj  return true        return false            define object that will wrap our logic    var jsScriptCssLoader      jsExpr   new RegExp   js     i     cssExpr   new RegExp   css     i     loadedFiles       loadFile  function  cssJsFileArray        var self   this         remove duplicates with in array     cssJsFileArray filter  item index   gt cssJsFileArray indexOf item   index      var loadedFileArray   this loadedFiles        each cssJsFileArray  function  index  url                    if multiple arrays are loaded the check the uniqueness             if  loadedFileArray contains url   return              if  self jsExpr test  url                        get url  function data                        self addScript data                                     else if  self cssExpr test  url                        get url  function data                        self addCss data                                                  self loadedFiles push url                   don t load twice accross different arrays     addScript  function  code        var oNew   document createElement  script        oNew type    text javascript       oNew textContent   code      document getElementsByTagName  head   0  appendChild oNew      addCss  function  code        var oNew   document createElement  style        oNew textContent   code      document getElementsByTagName  head   0  appendChild oNew             jsScriptCssLoader loadFile   css 1 css   css 2 css   css 3 css     jsScriptCssLoader loadFile   js common 1 js   js 2 js   js common file fileReader js

User · Answer

I wrote a simple module that automatizes the job of importing including module scripts in JavaScript  Give it a try and please spare some feedback     For detailed explanation of the code refer to this blog post  http   stamat wordpress com 2013 04 12 javascript-require-import-include-modules   var  rmod    rmod          require module namespace  rmod on ready fn stack        rmod libpath        rmod imported        rmod loading         scripts          length  0      rmod findScriptPath   function script name        var script elems   document getElementsByTagName  script        for  var i   0  i  lt  script elems length  i              if  script elems i  src endsWith script name                 var href   window location href              href   href substring 0  href lastIndexOf                    var url   script elems i  src substring 0  script elems i  length - script name length               return url substring href length 1  url length                       return          rmod libpath    rmod findScriptPath  script js      Path of your main script used to mark the root directory of your library  any library    rmod injectScript   function script name  uri  callback  prepare         if  prepare          prepare script name  uri        var script elem   document createElement  script        script elem type    text javascript       script elem title   script name      script elem src   uri      script elem async   true      script elem defer   false       if  callback          script elem onload   function                 callback script name  uri                   document getElementsByTagName  head   0  appendChild script elem        rmod requirePrepare   function script name  uri         rmod loading scripts script name    uri       rmod loading length         rmod requireCallback   function script name  uri         rmod loading length--      delete  rmod loading scripts script name        rmod imported script name    uri       if  rmod loading length    0           rmod onReady         rmod onReady   function         if    rmod LOADED            for  var i   0  i  lt   rmod on ready fn stack length  i                  rmod on ready fn stack i                          rmod LOADED   true              you can rename based on your liking  I chose require  but it can be called include or anything else that is easy for you to remember or write  except import because it is reserved for future use  var require   function script name        var np   script name split           if  np np length-1                     np pop            np push   all               script name   np join           var uri    rmod libpath   np join        js       if    rmod loading scripts hasOwnProperty script name         amp  amp    rmod imported hasOwnProperty script name              rmod injectScript script name  uri                rmod requireCallback                    rmod requirePrepare             var ready   function fn         rmod on ready fn stack push fn          ----- USAGE -----  require  ivar util array    require  ivar util string    require  ivar net       ready function          do something when required scripts are loaded

User · Answer

I used a much less complicated version recently with jQuery    lt script src  scripts jquery js  gt  lt  script gt   lt script gt    var js     scripts jquery dimensions js    scripts shadedborder js    scripts jqmodal js    scripts main js      var  head      head      for  var i   0  i  lt  js length  i           head append   lt script src       js i        gt  lt  scr     ipt gt          lt  script gt    It worked great in every browser I tested it in  IE6 7  Firefox  Safari  Opera   Update  jQuery-less version    lt script gt    var js     scripts jquery dimensions js    scripts shadedborder js    scripts jqmodal js    scripts main js      for  var i   0  l   js length  i  lt  l  i          document getElementsByTagName  head   0  innerHTML       lt script src       js i        gt  lt  scr     ipt gt          lt  script gt

User · Answer

You may write dynamic script tags  using Prototype    new Element  script    src   myBigCodeLibrary js   type   text javascript       The problem here is that we do not know when the external script file is fully loaded   We often want our dependant code on the very next line and like to write something like    if  iNeedSomeMore        Script load  myBigCodeLibrary js       includes code for myFancyMethod        myFancyMethod       cool  no need for callbacks      There is a smart way to inject script dependencies without the need of callbacks  You simply have to pull the script via a synchronous AJAX request and eval the script on global level    If you use Prototype the Script load method looks like this   var Script          loadedScripts          include  function script               include script only once         if  this  loadedScripts include script                 return false                       request file synchronous         var code   new Ajax Request script                asynchronous  false              method   GET               evalJS  false              evalJSON  false            transport responseText             eval code on global level         if  Prototype Browser IE                window execScript code             else if  Prototype Browser WebKit                    head   first   insert Object extend                  new Element  script                         type   text javascript                                            text  code                                             else               window eval code                        remember included script         this  loadedScripts push script

User · Answer

With Promises you can simplify it like this  Loader function     const loadCDN   src   gt      new Promise  resolve  reject    gt          if  document querySelector  head  gt  script src    src          null  return resolve         const script   document createElement  script         script src   src       script async   true       document head appendChild script        script onload   resolve       script onerror   reject          Usage  async await    await loadCDN  https       script js     Usage  Promise    loadCDN  https       script js   then res   gt      catch err   gt        NOTE  there was one similar solution but it doesn t check if the script is already loaded and loads the script each time  This one checks src property

User · Answer

There are scripts that are designed specifically for this purpose   yepnope js is built into Modernizr  and lab js is a more optimized  but less user friendly version     I wouldn t reccomend doing this through a big library like jquery or prototype - because one of the major benefits of a script loader is the ability to load scripts early - you shouldn t have to wait until jquery  amp  all your dom elements load before running a check to see if you want to dynamically load a script

User · Answer

Just found out about a great feature in YUI 3  at the time of writing available in preview release   You can easily insert dependencies to YUI libraries and to  external  modules  what you are looking for  without too much code  YUI Loader   It also answers your second question regarding the function being called as soon as the external module is loaded   Example   YUI       modules             simple                 fullpath   http   example com public js simple js                      complicated                 fullpath   http   example com public js complicated js              requires    simple        lt -- dependency to  simple  module                      timeout  10000    use  complicated   function Y  result           called as soon as  complicated  is loaded     if   result success               loading failed  or timeout         handleError result msg         else              call a function that needs  complicated          doSomethingComplicated                   Worked perfectly for me and has the advantage of managing dependencies  Refer to the YUI documentation for an example with YUI 2 calendar

User · Answer

Dynamic module import landed in Firefox 67    async      gt       await import    synth BubbleSynth js         With error handling   async      gt        await import    synth BubbleSynth js   catch  error    gt  console log  Loading failed    error          It also works for any kind of non-modules libraries  on this case the lib is available on the window object  the old way  but only on demand  which is nice  Example using suncalc js  the server must have CORS enabled to works this way   x000D   x000D   async      gt     await import  https   cdnjs cloudflare com ajax libs suncalc 1 8 0 suncalc min js     then function       let times   SunCalc getTimes new Date    51 5 -0 1      console log  Golden Hour today in London      times goldenHour getHours           times goldenHour getMinutes        Take your pics              x000D   x000D   x000D   https   caniuse com  feat es6-module-dynamic-import

User · Answer

I did basically the same thing that you did Adam  but with a slight modification to make sure I was appending to the head tag to get the job done   I simply created an include function  code below  to handle both script and css files   This function also checks to make sure that the script or CSS file hasn t already been loaded dynamically   It does not check for hand coded values and there may have been a better way to do that  but it served the purpose   function include  url  type           First make sure it hasn t been loaded by something else      if  Array contains  includedFile  url             return          Determine the MIME-type     var jsExpr   new RegExp   js     i         var cssExpr   new RegExp   css     i         if  type    null           if  jsExpr test  url                 type    text javascript           else if  cssExpr test  url                 type    text css           Create the appropriate element      var tag   null      switch  type            case  text javascript                tag   document createElement   script                 tag type   type              tag src   url              break          case  text css                tag   document createElement   link                 tag rel    stylesheet               tag type   type              tag href   url              break                Insert it to the  lt head gt  and the array to ensure it is not        loaded again      document getElementsByTagName  head   0  appendChild  tag        Array add  includedFile  url

User · Answer

The technique we use at work is to request the javascript file using an AJAX request and then eval   the return   If you re using the prototype library  they support this functionality in their Ajax Request call

User · Answer

Here is some example code I ve found    does anyone have a better way     function include url          var s   document createElement  script        s setAttribute  type    text javascript        s setAttribute  src   url       var nodes   document getElementsByTagName           var node   nodes nodes length -1  parentNode      node appendChild s

User · Answer

i ve used yet another solution i found on the net     this one is under creativecommons and it checks if the source was included prior to calling the function      you can find the file here  include js      include - including  js files from JS - bfults gmail com - 2005-02-09     Code licensed under Creative Commons Attribution-ShareAlike License      http   creativecommons org licenses by-sa 2 0                     var hIncludes   null  function include sURI         if  document getElementsByTagName             if   hIncludes              hIncludes              var cScripts   document getElementsByTagName  script          for  var i 0 len cScripts length  i  lt  len  i            if  cScripts i  src  hIncludes cScripts i  src    true            if   hIncludes sURI               var oNew   document createElement  script          oNew type    text javascript         oNew src   sURI        hIncludes sURI  true        document getElementsByTagName  head   0  appendChild oNew

User · Answer

There is no import   include   require in javascript  but there are two main ways to achieve what you want   1 - You can load it with an AJAX call then use eval   This is the most straightforward way but it s limited to your domain because of the Javascript safety settings  and using eval is opening the door to bugs and hacks   2 - Add a script tag with the script URL in the HTML   Definitely the best way to go  You can load the script even from a foreign server  and it s clean as you use the browser parser to evaluate the code  You can put the  tag in the head of the web page  or at the bottom of the body   Both of these solutions are discussed and illustrated here   Now  there is a big issue you must know about  Doing that implies that you remotely load the code  Modern web browsers will load the file and keep executing your current script because they load everything asynchronously to improve performances   It means that if you use these tricks directly  you won t be able to use your newly loaded code the next line after you asked it to be loaded  because it will be still loading   E G   my lovely script js contains MySuperObject  var js   document createElement  script     js type    text javascript   js src   jsFilePath   document body appendChild js    var s   new MySuperObject     Error   MySuperObject is undefined   Then you reload the page hitting F5  And it works  Confusing     So what to do about it    Well  you can use the hack the author suggests in the link I gave you  In summary  for people in a hurry  he uses en event to run a callback function when the script is loaded  So you can put all the code using the remote library in the callback function  E G    function loadScript url  callback           adding the script tag to the head as suggested before    var head   document getElementsByTagName  head   0      var script   document createElement  script       script type    text javascript      script src   url         then bind the event to the callback function        there are several events for cross browser compatibility    script onreadystatechange   callback     script onload   callback         fire the loading    head appendChild script       Then you write the code you want to use AFTER the script is loaded in a lambda function    var myPrettyCode   function            here  do what ever you want      Then you run all that    loadScript  my lovely script js   myPrettyCode     Ok  I got it  But it s a pain to write all this stuff   Well  in that case  you can use as always the fantastic free jQuery framework  which let you do the very same thing in one line      getScript  my lovely script js   function         alert  Script loaded and executed            here you can use anything you defined in the loaded script

User · Answer

another awesome answer     getScript  my lovely script js   function         alert  Script loaded and executed          here you can use anything you defined in the loaded script         https   stackoverflow com a 950146 671046

[javascript] Dynamically load a JavaScript file

Examples related to javascript

Examples related to file

Examples related to import

Examples related to include