Loading multiple 3rd party widgets asynchronously

multiple-3rd-party-widgets.js

(function() {
    
    var script,
        scripts = document.getElementsByTagName('script')[0];
        
    function load(url) {
      script = document.createElement('script');
      script.async = true;
      script.src = url;
      scripts.parentNode.insertBefore(script, scripts);
    }
    
    load('//apis.google.com/js/plusone.js');
    load('//platform.twitter.com/widgets.js');
    load('//s.widgetsite.com/widget.js');
    
}());

If there's no previous script tag on the page, won't scripts.parentNode throw a (Cannot read property parentNode of undefined) error ?

also any for in loop should use hasOwnProperty to protect for any prototype modifications on the page.

If there's no previous script tag on the page, won't scripts.parentNode throw a (Cannot read property parentNode of undefined) error ?

also any for in loop should use hasOwnProperty to protect for any prototype modifications on the page.

1. You're always going to have a script tag on the page, because you need to add the script above somehow

1. You're always going to have a script tag on the page, because you need to add the script above somehow

Very true! Good point =)

You also might want to wrap this in a function to protect the variable namespaces.

Very true! Good point =)

You also might want to wrap this in a function to protect the variable namespaces.

As you don't use the object keys, maybe it would be better to loop an array instead (performance).

As you don't use the object keys, maybe it would be better to loop an array instead (performance).

common approach.

common approach.

How about now?

How about now?

Shouldn't

}());

be

})(); ?

Shouldn't

}());

be

})(); ?

@harry1989 Both are valid Javascript. But if you want an opinionated answer, try Crockford http://www.youtube.com/watch?v=taaEzHI9xyY&feature=youtu.be#t=33m39s

@harry1989 Both are valid Javascript. But if you want an opinionated answer, try Crockford http://www.youtube.com/watch?v=taaEzHI9xyY&feature=youtu.be#t=33m39s

i use a window onload version. look https://gist.github.com/jswebschmiede/3660918

i use a window onload version. look https://gist.github.com/jswebschmiede/3660918

Similar to this one: https://gist.github.com/necolas/1025811 , although i find that one much better.

Similar to this one: https://gist.github.com/necolas/1025811 , although i find that one much better.

How about to pass the "document" as parameter into scope?

How about to pass the "document" as parameter into scope?

good

good

goood

goood

i think pass 'document' into scope is better

i think pass 'document' into scope is better

Nice 👍

Nice 👍

ty babe

ty babe