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.
Related
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();
I want to load a constants file as per the language the user has selected. For that I want to load the scripts dynamically.
<html>
<body>
<script type="text/javascript">
var jsElement = document.createElement("script");
jsElement.type = "application/javascript";
jsElement.src = "../constants.en.js";
document.body.appendChild(jsElement);
</script>
<script type="text/javascript" src="../js/RandomScript.js"></script>
</body>
Whole code is in HTML.
When I tried the code above, RandomScript.js is loaded before the constant file.
How can I maintain sequence of loading files.
I am not using jQuery or something, so is there any way to do interpolation of src of script?
You can use onload event listener to load .js files sequentially.
First create an array of URLs of scripts. Then loop through it recursively. onload event listener ensures that the scripts are loaded sequentially.
var scriptURLs = [
"../constants.en.js",
"../js/RandomScript.js"
];
function loadScript(index){
if(index >= scriptURLs.length){
return false;
}
var el = document.createElement('script');
el.onload = function(){
console.log("Script loaded: ", scriptURLs[index]);
loadScript(index+1);
}
el.src = scriptURLs[index];
document.body.appendChild(el);
// OR
// document.head.appendChild(el);
}
loadScript(0); // Load the first script manually.
Hope this helps.
var jsElement = document.createElement("script");
jsElement.type = "application/javascript";
document.body.appendChild(jsElement);
jsElement.onload = () => {
callyournewScript();
}
jsElement.src = "../constants.en.js";
Load the ../js/RandomScript.js after loading the ../constants.en.js like following
<body>
<script type="text/javascript">
var jsElement = document.createElement("script");
jsElement.type = "application/javascript";
jsElement.src = "../constants.en.js";
document.body.appendChild(jsElement);
var script = document.createElement("script");
script.src = "../js/RandomScript.js";
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
</script>
<!-- <script type="text/javascript" src="../js/RandomScript.js"></script> -->
</body>
When I click a button I want a script that I have on my computer to run. It can be a simple print "Hello World".
How do I do that ? What I have is this :
I don't have the litle idea how do this could be done please can you help?
HTML
<input class="buttonRun" type="button" value="Run" id="btnRun"/>
function runScript() {
}
$("#btnRun").click(function () {
runScript();
});
Python
print ("Hello World");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="buttonRun" type="button" value="Run" id="btnRun"/>
<script>
function runScript() {
alert('Hello World!');
}
$("#btnRun").click(function () {
runScript();
});
</script>
Here you can pass the scriptUrl to this function and it will load all the methods and variable that has been wriiten in the script file.
loadExternalScript(scriptUrl: string) {
return new Promise((resolve, reject) => {
const scriptElement = document.createElement('script')
scriptElement.src = scriptUrl
scriptElement.onload = resolve
document.body.appendChild(scriptElement)
});
}
may this help for you:
You may dynamically need to append the script in your tag like this
try this
function runScript(){
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.onreadystatechange = function () {
if (this.readyState === 'complete' || this.readyState === 'loaded') {
callback();
}
};
script.onload = callback;
script.src = 'Your scripts path ';
head.appendChild(script);
}
How to show code external JavaScript in alert or anywhere because is value of variable s_code
(function(){
var newscript = document.createElement('script');
newscript.type = 'text/javascript';
newscript.async = true;
newscript.src = 'http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js?'+Math.random();
s_code = newscript.toString();
alert(s_code);
})();
Only using plain JavaScript without external library.
Using jQuery's $.get you can do this way:
$(function () {
$.get("https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js", function (res) {
alert(res);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Fiddle: https://jsfiddle.net/aahedi/y0v4kz3u/1/
I am trying to create a new window dynamically using window.open() and $(document).ready( function() { ... }); I got it working on Chrome and Internet Explorer but firefox is not trigering the jQuery code. See code below:
index.html code:
<html>
<head>
</head>
<body>
Link
<script type="text/javascript">
function showDetails(name, timeStamp)
{
var w = window.open("", timeStamp);
var s = w.document.createElement("script");
s.type = "text/javascript";
s.src = "var eventArray = [];";
w.document.body.appendChild(s);
var s = w.document.createElement("script");
s.type = "text/javascript";
s.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
w.document.body.appendChild(s);
var s = w.document.createElement("script");
s.type = "text/javascript";
s.src = "test.js";
w.document.body.appendChild(s);
w.document.title = name;
w.document.close();
return false;
}
</script>
</body>
test.js code:
alert("executing js file");
$(document).ready( function()
{
alert("document ready fired");
});
The first alert "executing js file" is executing but not the second one "document ready fired".
Any idea how can I make this work on firefox?
NOTE:
w.document.close(); and return false; is added following this post but still not working...
jquery is loading properly
thank you very much in advance
My inner sense says:
s.src = "jquery1.10.2.js";
should be:
s.src = "jquery-1.10.2.js";
Or any valid url that points to jquery.
Why you always use same variable names? Could you please try it like:
<script type="text/javascript">
function showDetails(name, timeStamp) {
var w = window.open("", timeStamp);
var s1 = w.document.createElement("script");
s1.type = "text/javascript";
s1.src = "var eventArray = [];";
w.document.body.appendChild(s1);
var s2 = w.document.createElement("script");
s2.type = "text/javascript";
s2.src = "jquery1.10.2.js";
w.document.body.appendChild(s2);
var s3 = w.document.createElement("script");
s3.type = "text/javascript";
s3.src = "test.js";
w.document.body.appendChild(s3);
w.document.title = name;
w.document.close();
return false;
}
</script>