Created
February 11, 2023 11:53
-
-
Save chrdek/18fb11569a8031377e02e89467de443a to your computer and use it in GitHub Desktop.
Ways to test remote script libraries in-browser
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
| //Run in F12 Tools console. | |
| javascript:(function() { var s = document.createElement("script"); s.src="<yourCdnScriptUrl>.js";document.getElementsByTagName("head")[0].appendChild(s)})() | |
| //Run in Browser bar, F12 Tools console (JQ, AngularJS testing). | |
| javascript:(function(e,s){e.src=s;e.onload=function(){jQuery.noConflict();console.log('jQuery injected')};document.head.appendChild(e);})(document.createElement('script'),'https://code.jquery.com/jquery-latest.min.js') | |
| javascript:(function(e,s){e.src=s;e.onload=function(){angular.injector(['ng']);console.log('AngularJS injected')};document.head.appendChild(e);})(document.createElement('script'),'https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js') | |
| //Facebook external script inject - using <head> tag. | |
| (function(d, script) { | |
| script = d.createElement('script'); | |
| script.type = 'text/javascript'; | |
| script.async = true; | |
| script.onload = function(){ | |
| // remote script has loaded | |
| }; | |
| script.src = 'http://www.google-analytics.com/ga.js'; //<yourCdnScriptUrl>.js | |
| d.getElementsByTagName('head')[0].appendChild(script); | |
| }(document)); | |
| //Facebook external script inject (2nd update) - using <script> tag. | |
| (function(d, s, id){ | |
| var js, fjs = d.getElementsByTagName(s)[0]; | |
| if (d.getElementById(id)){ return; } | |
| js = d.createElement(s); js.id = id; | |
| js.onload = function(){ | |
| // remote script has loaded | |
| }; | |
| js.src = "//connect.facebook.net/en_US/sdk.js"; //<yourCdnScriptUrl>.js | |
| fjs.parentNode.insertBefore(js, fjs); | |
| }(document, 'script', 'facebook-jssdk')); | |
| //EcmaScript 2015 compliant - using promises. | |
| function injectScript(src) { | |
| return new Promise((resolve, reject) => { | |
| const script = document.createElement('script'); | |
| script.src = src; | |
| script.addEventListener('load', resolve); | |
| script.addEventListener('error', e => reject(e.error)); | |
| document.head.appendChild(script); | |
| }); | |
| } | |
| injectScript('https://example.com/script.js') | |
| .then(() => { | |
| console.log('Script loaded!'); | |
| }).catch(error => { | |
| console.error(error); | |
| }); | |
| //Direct module import in v8 chrome. | |
| import("http://example.com/module.js").then(function(module) { | |
| alert("module ready"); | |
| }); | |
| //Alternative method, direct <script> tag cdn load. | |
| (function() { | |
| // Create a new script node | |
| var script = document.createElement("script"); | |
| script.type = "text/javascript"; | |
| script.onload = function() { | |
| // Cleanup onload handler | |
| script.onload = null; | |
| // do stuff with the loaded script! | |
| } | |
| // Add the script to the DOM | |
| (document.getElementsByTagName( "head" )[ 0 ]).appendChild( script ); | |
| // Set the `src` to begin transport | |
| script.src = "https://remote.com/"; | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment