Dynamically Loaded Script is undefined after load

Question

When adding a script loaded dynamically, I can access main object during execution but once the page is loaded, if I try to access that from console, it throws undefined. For example,

 var js, fjs = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id;
     js.src = "//connect.facebook.net/en_US/all.js";
 js.onload = ()=> { /* do something when script loads */}
 fjs.parentNode.insertBefore(js, fjs);

This should ideally append FB object to window, and it does that during execution of page. I can access window.FB while the aforesaid JS is executing, but once the page is loaded (and I know that js.onload is also executed), I can't access FB.someOperation.

What is the solution to ensure that dynamically added script is always available (even after page has loaded)

onLoad should be onload

evolutionxbox
– evolutionxbox

2016-11-08 09:30:09 +00:00
Commented Nov 8, 2016 at 9:30 — evolutionxbox
– evolutionxbox, Commented Nov 8, 2016 at 9:30

evolutionxbox · Accepted Answer · 2016-11-08 09:35:59Z

1

Remember to double check the property names.

onLoad should be onload (all lowercase).

var d = document;
var id = 'hello';
var js, fjs = d.getElementsByTagName('script')[0];
js = d.createElement('script');
js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";

js.onload = () => {
//   ^--------------------------- note the lowercase 'l'
  console.log('hello world');
};

fjs.parentNode.insertBefore(js, fjs);

<script></script>

edited Nov 8, 2016 at 9:35

answered Nov 8, 2016 at 9:30

evolutionxbox

4,1426 gold badges41 silver badges59 bronze badges

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

Comments

Tân · Accepted Answer · 2016-11-08 09:36:26Z

0

I suggest to using jQuery.getScript() for dynamic as you've mentioned.

Ex:

var func = function () {
    console.log('do this without the script');

    console.log('geting script...');

    $.getScript( "//connect.facebook.net/en_US/all.js", function( data, textStatus, jqxhr ) {
          console.log('script is loaded...');

          console.log( data ); // Data returned
          console.log( textStatus ); // Success
          console.log( jqxhr.status ); // 200
          console.log( "Load was performed." );
    });
};

func();

answered Nov 8, 2016 at 9:36

Tân

1

Collectives™ on Stack Overflow

Dynamically Loaded Script is undefined after load

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related