Last active
September 8, 2016 09:06
-
-
Save yemster/5cbc653fd2526eca1b629de589bbeca1 to your computer and use it in GitHub Desktop.
jQuery loader for a widget/embed container.
Boilerplate for building a web widget that is dependent on jQuery * Checks to see if a specific version of jQuery already present on the host page If present and regEx matches our target version, we use it - ala `window.jQuery` If not, a specific version is downloaded from CDN and added ala jquery no c…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS Script loader</title> | |
| <!-- Comment out next line to test "jquery missing on page" scenario --> | |
| <!-- <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script> --> | |
| <!-- <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> --> | |
| </head> | |
| <body> | |
| <h1>This page should load jQuery is missing on the page.</h1> | |
| <code>open console to see rundown of what's going on.</code> | |
| <div id="status_container" class="status"> If you see this, jQuery has not been loaded or initialised </div> | |
| <script type="text/javascript"> | |
| ;(function(window, document) { | |
| 'use strict' | |
| var com = com || {}, | |
| $ = window.$ || null, | |
| jQuery = window.jQuery || null, | |
| jqTargetVersion = '1.12.4', | |
| jqSrc = "https://code.jquery.com/jquery-" + jqTargetVersion + ".min.js"; | |
| var systemJquery = function sysJqry() { | |
| try { | |
| return window.jQuery.fn.jquery | |
| } catch (e) { | |
| return 'unknown' | |
| }; | |
| } | |
| com.myWidget = com.myWidget || {}; | |
| com.myWidget.isJqueryAvailable = function isJqueryAvailable() { | |
| return (window.jQuery !== undefined && window.jQuery.fn.jquery.match(/1\.12/) !== null) | |
| } | |
| com.myWidget.loadScript = function loadScript(url, callback) { | |
| var scriptTag = document.createElement('script'); | |
| scriptTag.setAttribute("type", "text/javascript"); | |
| scriptTag.setAttribute("src", url); | |
| console.log('! ... load script from %s ', url); | |
| if (typeof callback !== "undefined") { | |
| if (scriptTag.readyState) { | |
| scriptTag.onreadystatechange = function () { /* For old versions of IE */ | |
| if (this.readyState === 'complete' || this.readyState === 'loaded') | |
| callback(); | |
| }; | |
| } else { | |
| scriptTag.onload = callback; | |
| } | |
| } | |
| (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(scriptTag); | |
| console.log(' √ ... script loaded. now calling callback method: %s() ', callback.name); | |
| } | |
| com.myWidget.initWidget = function initWidget() { | |
| console.log('Done... jQuery initialised @ v%s', $.fn.jquery); | |
| $('#status_container').css({ color: 'green' }).html('<p>Yay... we be cooking on gas</p>') | |
| } | |
| com.myWidget.afterJqLoaded = function afterJqLoaded() { | |
| jQuery(document).ready(function($) { | |
| try { window.jQuery.fn.jquery } catch (e) {'unknown'} | |
| console.log('Jquery v%s loaded and ready (system version = v%s). lets bring in any other deps', $.fn.jquery, systemJquery()) | |
| com.myWidget.initWidget(); | |
| }); | |
| } | |
| com.myWidget.initWdgtComponent = function _init() { | |
| console.log('><><><>< Let us begin ><><><><') | |
| // detect and localise jQuery | |
| if (com.myWidget.isJqueryAvailable()) { | |
| $ = jQuery = window.jQuery | |
| com.myWidget.afterJqLoaded() | |
| } else { | |
| com.myWidget.loadScript(jqSrc, function jqScriptLoadHandler() { | |
| $ = jQuery = window.jQuery.noConflict(true) | |
| com.myWidget.afterJqLoaded() | |
| }) | |
| } | |
| } | |
| com.myWidget.initWdgtComponent() | |
| })(window, document); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment