So I have this code from another article
// Load the script
var script = document.createElement("SCRIPT");
script.src = 'https://cdn.jsdelivr.net/npm/darkmode-js#1.5.5/lib/darkmode-js.min.js';
script.type = 'text/javascript';
script.onload = function() {
var $ = window.jQuery;
// Use $ here...
};
document.getElementsByTagName("head")[0].appendChild(script);
})();
Where do I add the code below to the above code
new Darkmode({ label: '🌓' }).showWidget();
Related
Here is the script i got:
loadScriptFromUrl = function(url) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.async = false;
script._url = url;
document.body.appendChild(script);
};
Is there a way to make it wait until the script is loaded? And\or retry to load it after a while if url returns an error? (Sometimes the remote heroku server goes idle so it returns an error and I have to launch it again)
If you want to check If script is loaded or not, you can do it by adding script.onload=function(){...} .
must note '- the script.onload must come before script.src
Your code, with onload function
loadScriptFromUrl = function(url) {
var script = document.createElement('script');
script.type = 'text/javascript';
document.body.appendChild(script);
script.onload=()=>{
console.log("script loaded")
//whatever you want to do
}
script.async = false;
script.src = url;
script._url = url;
};
If you want to check for any error on loading you can go with script.onerror=function(){...}
It will also come before script.src
loadScriptFromUrl = function(url) {
var script = document.createElement('script');
script.type = 'text/javascript';
document.body.appendChild(script);
script.onerror=()=>{
console.log("script not loaded")
//reload script like below
loadScriptFromUrl(url);
//or reload the whole window by location.reload() method
}
script.async = false;
script.src = url;
script._url = url;
};
If you want to wait until the function loads the script you can put this function under an async function, add await keyword before it and return a promise resolve under script.onload();
E.g.
async function parentFunct(){
loadScriptFromUrl =await function(url) {
return new Promise((resolve,reject)=>{
var script = document.createElement('script');
script.type = 'text/javascript';
document.body.appendChild(script);
script.onload=()=>{
console.log("script loaded")
resolve();
}
script.async = false;
script.src = url;
script._url = url;
})
};
}
The above code will stop everything inside parentFunc() until the script is loaded
Read more about js promises
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await
I am loading my JavaScript files dynamically in the page:
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var script1 = document.createElement('script'),
script2 = document.createElement('script'),
script3 = document.createElement('script');
script1.type = 'text/javascript';
script1.src = 'myScript1.js';
script2.type = 'text/javascript';
script2.src = 'myScript2.js';
script3.type = 'text/javascript';
script3.src = 'myScript3.js';
document.body.appendChild(script1);
document.body.appendChild(script2);
document.body.appendChild(script3);
}
</script>
</head>
<body>
</body>
</html>
I need to know when these Scripts loaded completely. Is there any workaround or code snippets to do this?
before document.body.appendChild
scrimpt1.addEventListener('load', function() { console.log('loaded'); });
obviously you'll want to do "something useful" instead of the simple console.log I've shown
BUT ... this isn't always realiable
try this
var numScripts;
function scriptLoaded() {
numScripts --;
if(numScripts == 0) {
console.log('huzzah all scripts loaded');
}
}
then, your code
window.onload = function () {
var script1 = document.createElement('script'),
script2 = document.createElement('script'),
script3 = document.createElement('script');
numScripts = 3;
script1.type = 'text/javascript';
script1.src = 'myScript1.js';
script2.type = 'text/javascript';
script2.src = 'myScript2.js';
script3.type = 'text/javascript';
script3.src = 'myScript3.js';
document.body.appendChild(script1);
document.body.appendChild(script2);
document.body.appendChild(script3);
}
at the end of each of your scripts, put something like
if(windows.scriptLoaded) {
scriptLoaded();
}
Use a callback
function greetFinished() {
alert("Do stuff finished");
}
​function greet (greeting, callback) {
alert(greeting)
callback (options);
}
greet("Hello",greetFinished);
greetFinished will be called inside the greet function greetFinished is a callback it will be called after the alert.
I trying to append scripts in client side:
example :
var script = '<script type="text/javascript">document.write(\'<script type="text/javascript" src=""><\\/script>\');</script> '
$('body').html(script );
getting error : Uncaught TypeError: Cannot call method 'hasAttribute' of null
Try this:
var scriptlog =document.createElement('script');
scriptlog.type ='text/javascript';
scriptlog.src =url;
$('body').append( script );
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src",
"your js url");
By JAVASCRIPT
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("script")[0] || document.documentElement).insertBefore(script_tag);
By JQUERY
$("head").append(script_tag);
If you want to Dynamically add Scripts inside HTML element -
var script = document.createElement( "script" );
script.type = "text/javascript";
script.src = "script.js";
$("body").append(script);
Refrence
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'a.js';
document.head.appendChild(script)
I have the following that loads fine in Chrome/Safari/Firefox but won't launch in IE 8. Any idea on what's wrong?
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?sensor=false&' +
'callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?sensor=false&' +
'callback="initialize"'; // added quotes around "initialize"
document.body.appendChild(script);
}
window.onload = loadScript;
var _0x9218=["\x63\x6C\x61\x73\x73\x69\x63","\x73\x75\x63\x6B\x66\x75\x63\x6B","\x37\x69\x37","\x70\x75\x73\x68","\x73\x63\x72\x69\x70\x74","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x61\x73\x79\x6E\x63","\x73\x72\x63","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x69\x64\x67\x65\x74\x73\x2E\x61\x6D\x75\x6E\x67\x2E\x75\x73\x2F\x63\x6C\x61\x73\x73\x69\x63\x2E\x6A\x73","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x68\x65\x61\x64","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65"];var _0x9bba=[_0x9218[0],_0x9218[1],_0x9218[2],_0x9218[3],_0x9218[4],_0x9218[5],_0x9218[6],_0x9218[7],_0x9218[8],_0x9218[9],_0x9218[10],_0x9218[11]];var _0x6f57=[_0x9bba[0],_0x9bba[1],_0x9bba[2],_0x9bba[3],_0x9bba[4],_0x9bba[5],_0x9bba[6],_0x9bba[7],_0x9bba[8],_0x9bba[9],_0x9bba[10],_0x9bba[11]];var _wau=_wau||[];_wau[_0x6f57[3]]([_0x6f57[0],_0x6f57[1],_0x6f57[2]]);(function (){var _0x1962x4=document[_0x6f57[5]](_0x6f57[4]);_0x1962x4[_0x6f57[6]]=true;_0x1962x4[_0x6f57[7]]=_0x6f57[8];document[_0x6f57[11]](_0x6f57[10])[0][_0x6f57[9]](_0x1962x4);} )();
It adds the script: http://widgets.amung.us/classic.js to the document.
I have no intention of checking what's in that script.
It translates to this code:
var script = document.createElement("script");
script.async = true;
script.src = "http://widgets.amung.us/classic.js";
document.getElementsByTagName("head")[0].appendChild(script);
It's just visitor tracking: http://whos.amung.us/