Load 3rd party js asynchronously, initialize queue, replace queue
Here's a live demo.
third-party.js: example of 3rd part javascript (the part no one ever talks about)
(function (window) {
'use strict';
var thirdParty = window.thirdParty;
function processQueue(args){
var params = [].slice.call(args),
method = params.shift();
if(thirdParty[method]){
thirdParty[method].apply(thirdParty, params);
} else {
console.log('thirdParty does not have a ' + method + ' function');
}
}
thirdParty.init = function(id, key) {
console.log('init called', id, key);
};
thirdParty.send = function(data) {
console.log('send called', data);
};
for (var i in thirdParty.q || []){
processQueue(thirdParty.q[i]);
}
// swap original function with just loaded one
window.thirdParty = function () {
processQueue(arguments);
};
}(window));
index.html: example of setting up the 3rd party js queue (the part that is always shown)
<script>
// setup our thirdParty.q (queue), to store function calls
// before thirdParty has been downloaded an initialized
(function (window, document, tag, url, name, a, m) {
window[name] = window[name] || function () {
(window[name].q = window[name].q || []).push(arguments)
};
a = document.createElement(tag),
m = document.getElementsByTagName(tag)[0];
a.async = 1;
a.src = url;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//example.com/v1/third-party.js', 'thirdParty');
// these calls are qeued up
thirdParty('init', '123456', 'pubkey-123456');
thirdParty('send', {greeting: 'ello world'});
// this should be run without using the queue
setTimeout(function() {
console.log('this makes sure thirdParty script can be called after it has processes queued items');
thirdParty('send', {greeting: 'ello again'});
}, 4000);
</script>
Inspiration:
Written by Eddy Hernandez
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Js
Authors
Did you know?
JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.
Security insights from Cside
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#