Load javascript dynamically?

Question

In my project requirement I need to add java script dynamically I have a js file global.js which contains all global variable that I want to add dynamically. I also want to add global.js before util.js( which uses variable defined in global.js) which is not happening

If I open page source I can't see the global.js added there I also want this to be work in all browser mainly in ie6 and ie8

my code Index.html

<script src="../fw.ui.lib/resources/sap-ui-core.js" id="sap-ui-bootstrap"
                  data-sap-ui-libs="sap.ui.commons, sap.ui.table, sap.ui.ux3"
                  data-sap-ui-theme="sap_goldreflection">

            </script>

            <script src="../fw.ui/js/application_properties.js"      type="text/javascript"></script>
            <script src="../fw.ui/js/header.js" type="text/javascript"></script>
            <script src="../fw.ui/js/dao/userDAO.js" type="text/javascript"></script>
            <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
            <script src="js/controls/DynamicJsLoad.js" type="text/javascript"></script>
            <script></script>
            <script>addScriptDynamically()</script>
 <script src="js/controls/util.js" type="text/javascript"></script>

DynamicJsLoad.js

function loadScript(url){
      var e = document.getElementsByTagName("script")[5];
      var d = document.createElement('script');
      d.src = url;
      d.type = 'text/javascript';
      d.async = false;
      d.defer = true;
      e.parentNode.insertBefore(d,e);
}

function addScriptDynamically(){
      var scheme = getCacheBurstScheme();
      if( scheme == 'dev'){
            scheme = new Date();
      }
      loadScript('js/global.js'+'?scheme='+scheme);
}

This seems like a complex way of dynamically loading your dependencies. Why not use RequireJS? requirejs.org — James Wright
– James Wright, Commented Jun 10, 2013 at 11:24
RequireJS is the perfect library for this task. Your manual implementation seems unnecessarily complex. requirejs.org — James Wright
– James Wright, Commented Jun 10, 2013 at 11:28

Lukas Eder · Accepted Answer · 2013-06-10 11:35:06Z

3

If you are using jQuery anyway, you could leverage their loadScript() function. An example from their website:

$.getScript("ajax/test.js", function(data, textStatus, jqxhr) {
    // [...]
});

Regarding your current solution, here are a couple of hints:

You set defer = true, which will defer loading (and executing) of your dynamically loaded script to the end. Thus after util.js. I don't think you want that
Dynamically loaded js sources do not appear in your page's source code. You might need to use a tool like Firebug to validate if things have loaded.

edited Jun 10, 2013 at 11:35

answered Jun 10, 2013 at 11:26

Lukas Eder

223k138 gold badges729 silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Arvind Over a year ago

so u are suggesting that the way i am doing will not acheieve what i want (might be there is bug or sth)

Lukas Eder Over a year ago

@Arvind: No, I'm suggesting that if you have jQuery as a dependency anyway, you might as well use jQuery for the task. See the updated answer for some hints regarding your own attempt

Arvind Over a year ago

Thanks that getScript worked but one more problem in this it is adding one random no in the url i want control on that.. for production i want this to be build no not random always but for dev environment this is fine

Collectives™ on Stack Overflow

Load javascript dynamically?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related