CODEWITHSUNDEEP
javascripthtml
Arvind
Arvind

Reputation: 1237

Load javascript dynamically?

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);
}

Upvotes: 2

Views: 150

Answers (1)

Lukas Eder
Lukas Eder

Reputation: 220762

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:

  1. 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
  2. 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.

Upvotes: 3

Related Questions