Load scripts if not already loaded, and then use them

Question

I have 4 javascript libraries I would like to load if the are not already loaded. Then, I want to use their functions.

My problem is that I am getting Uncaught ReferenceError: sbjs is not defined, the scripts get loaded but I can't actually use them.

I have it working perfectly to where it will add the scripts above the </body> tag if they are not already loaded, but I can't seem to get them to work.

Here is my code:

<script>
    window.onload = myapp_scripts;

    function myapp_scripts () {
      var myapp_script;

      if (!window.jQuery) {
        myapp_script = document.createElement('script');
        document.body.appendChild(myapp_script);
        myapp_script.src = 'http://myapp.dev/js/jquery.min.js';
        console.log('load jquery');
      }
      if (!window.Cookies) {
        myapp_script = document.createElement('script');
        document.body.appendChild(myapp_script);
        myapp_script.src = 'http://myapp.dev/js/cookie.min.js';
        console.log('load cookies');
      }
      if (typeof url == 'undefined') {
        myapp_script = document.createElement('script');
        document.body.appendChild(myapp_script);
        myapp_script.src = 'http://myapp.dev/js/url.min.js';
        console.log('load url');
      }
      if (typeof sbjs == 'undefined') {
        myapp_script = document.createElement('script');
        document.body.appendChild(myapp_script);
        myapp_script.src = 'http://myapp.dev/js/sourcebuster.min.js';
        console.log('load sbjs');
      }

      myapp_init();
    }

    function myapp_init () {
        sbjs.init();

        console.log(Cookies.get('source_id'));
        console.log(url('source_id'));
        console.log(sbjs.get.current);

        $('#myapp_form').submit(function (event) {
            event.preventDefault();
            console.log('form submitted');
        });
    }
</script>

How do I make it so I can also use the scripts I've loaded dynamically?

Possible duplicate of [Dynamically load JS inside JS](https://stackoverflow.com/questions/14521108/dynamically-load-js-inside-js) — Chase, Jul 24 '17 at 00:07
It's more complicated than that. You can only use them once the scripts are loaded, which you'll know for sure happened in the `onload` function of every `createElement` script. Why not just load them upfront? — Jorg, Jul 24 '17 at 00:08
Which part of the error is it occurring? somewhere here `sbjs.init();` or `if (typeof sbjs == 'undefined')` — smzapp, Jul 24 '17 at 00:10
This is for a form generator I am creating for a CRM. Basically, I want to load scripts if they are not already present on the client website. The client website vary and I have no way to view their code before they put the forms on the site. — kjdion84, Jul 24 '17 at 02:04

MTK · Accepted Answer · 2017-07-24T00:51:22.300

I think your problem is because myapp_init() is executed before scripts are loaded You need to manage script load event and after call myapp_init()

some like this inside each if() condition:

var myapp_script;

var scripts_loaded = 0;

  if (!window.jQuery) {
    myapp_script = document.createElement('script');
    document.body.appendChild(myapp_script);
    myapp_script.src = 'http://myapp.dev/js/jquery.min.js';
    console.log('load jquery');

    myapp_script.onload = function(){
        scripts_loaded ++;
        if(scripts_loaded === 4){ //4 because in your example you have 4 scripts to load
           myapp_init();
        }  
    }

  }else{
     scripts_loaded ++;
  }
//...
//And so on with others if conditions

Is not a elegant solution but is only one the idea: to check in some way if all scripts are loaded and after that call myapp_init();

You have reason. But this was the first thing that occurred to me to explain the idea — MTK, Jul 24 '17 at 01:00

Load scripts if not already loaded, and then use them

1 Answers1