Load JavaScript dynamically

Question

I have a web page and a canvas with Google Maps embedded in it. I am using jQuery on this site.

I want to load Google Maps API only if the user clicks on "Show me the map". Further, I want to take away the whole loading of the Google Maps from the header in order to improve my page performance.

So I need to load JavaScript dynamically. What JavaScript function I can use?

You may want to check this question: http://stackoverflow.com/questions/310583/loading-javascript-dependencies-on-demand — Igor Zinov'yev, Sep 03 '11 at 13:24
@Igor Since he's using jQuery already, using `$.getScript` should remove the hassle. — Arnaud Leymet, Sep 03 '11 at 13:26

score 27 · Accepted Answer · answered Sep 03 '11 at 13:23

27

You may want to use jQuery.getScript which will help you load the Google Maps API javascript file when needed.

Example:

$.getScript('http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=true', function(data, textStatus){
   console.log(textStatus, data);
   // do whatever you want
});

answered Sep 03 '11 at 13:23

Arnaud Leymet

5,995
4
35
51

Beware that the success callback is called once the script has been _loaded_, before it has been _executed_. – vegemite4me Apr 25 '14 at 13:13

score 10 · Answer 2 · answered Sep 03 '11 at 13:26

Use the Loading on Demand Loading Strategy

Loading on Demand

The previous pattern loaded additional JavaScript unconditionally after page load, assuming that the code will likely be needed. But can we do better and load only parts of the code and only the parts that are really needed? Imagine you have a sidebar on the page with different tabs. Clicking on a tab makes an XHR request to get content, updates the tab content, and animates the update fading the color. And what if this is the only place on the page you need your XHR and animation libraries, and what if the user never clicks on a tab? Enter the load-on-demand pattern. You can create a require() function or method that takes a filename of a script to be loaded and a callback function to be executed when the additional script is loaded.

The require() function can be used like so:

require("extra.js", function () {
   functionDefinedInExtraJS();
});

Let’s see how you can implement such a function. Requesting the additional script is straightforward. You just follow the dynamic element pattern. Figuring out when the script is loaded is a little trickier due to the browser differences:

function require(file, callback) {
   var script = document.getElementsByTagName('script')[0],
   newjs = document.createElement('script');

  // IE
  newjs.onreadystatechange = function () {
     if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') {
        newjs.onreadystatechange = null;
        callback();
     }
  };
  // others
  newjs.onload = function () {
     callback();
  }; 
  newjs.src = file;
  script.parentNode.insertBefore(newjs, script);
}

this is an absolute life-saver when trying to dynamically load local files from a local (file:///) context... thanks a bunch :) — Zathrus Writer, May 10 '13 at 23:07

score 4 · Answer 3 · edited Sep 03 '11 at 13:29

4

you would just generate the script tag via javascript and add it to the doc.

function AddScriptTag(src) {
    var node = document.getElementsByTagName("head")[0] || document.body;
    if(node){
        var script = document.createElement("script");
        script.type="text/javascript";
        script.src=src
        node.appendChild(script);
    } else {
        document.write("<script src='"+src+"' type='text/javascript'></script>");
    }
}

edited Sep 03 '11 at 13:29

Evgeny

10,698
9
60
70

answered Sep 03 '11 at 13:22

rlemon

17,518
14
92
123

Are you sure that `document.getElementsByTagName` is cross-browser enough? – Igor Zinov'yev Sep 03 '11 at 13:25
Yet it is, as per http://www.quirksmode.org/dom/w3c_core.html#t12 – Arnaud Leymet Sep 03 '11 at 13:35

score 0 · Answer 4 · answered Feb 13 '13 at 09:22

I think you're loking for this http://unixpapa.com/js/dyna.html

<input type="button" onclick="helper()" value="Helper">

   <script language="JavaScript">
   function helper()
   {
      var head= document.getElementsByTagName('head')[0];
      var script= document.createElement('script');
      script.type= 'text/javascript';
      script.src= 'your_script_url';
      head.appendChild(script);
   }
   </script>

score 0 · Answer 5 · answered Aug 07 '13 at 16:50

I used the Tangim response, but after found that is more easy use jquery html() function. When we make ajax request to html file that have html+javascript we do the follow:

$.ajax({
    url:'file.html',
    success:function(data){
       $("#id_div").html(data); //Here automatically load script if html contain
    }
});

Load JavaScript dynamically

5 Answers5

Loading on Demand

Linked

Related