Skip to content

Instantly share code, notes, and snippets.

@solomonrothman

solomonrothman/JS-Super-Embed-Widget.js

Last active March 2, 2016 17:57
Show Gist options
  • Save solomonrothman/644d8b8ff9fb665feae6 to your computer and use it in GitHub Desktop.
Save solomonrothman/644d8b8ff9fb665feae6 to your computer and use it in GitHub Desktop.
Download ZIP
Javascript Async LazyLoad Embed Widget - Multiple embed on single page with/without head
Raw
JS-Super-Embed-Widget.js
<script data-version="v1" data-widget-id="0001" id="unique-id" type="text/javascript" async>
// Embedable Javascript Widget
// Uses vanilla javascript, we can't make assumptions about jQuery or other libraries being available.
// "data-version": It's useful to put the version of your embedder script in the "version" data
// attribute. This will enable you to more easily debug if any issues arise.
// "data-client-id": This id allows us to pull up the correct client's settings from our database.
// Each client may have different settings associated with their widget, and you can load them
// with this!
// "id": This HTML id allows us to refer to this embedder script's location. This is helpful
// if you want to inject html code in specific places in hour hosts's website or if you want to
// insert your payload script right next to this in the <head> tag.
(function() {
function async_load(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://example.com/script.js';
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(s); //insert script into head or documentElement
}
if (window.attachEvent)
window.attachEvent('onload', async_load);
else
window.addEventListener('load', async_load, false);
})();
</script>
<div id="unique-id-container" data-parameter-1="" data-parameter-2="">Loading...</div>
<!-- Data Parameters added to target container, this allows us to have multiple embeds with different options on the same page, it's also cleaner than including parameters in the script tag or in query string arguments, additionally it allows for better caching of loader script from embed-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment