This question already has answers here:
Load jQuery with Javascript and use jQuery
(9 answers)
Closed 8 years ago.
Try the following code in your browser's console:
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'http://code.jquery.com/jquery-2.1.1.min.js';
script.async = true;
document.body.appendChild(script);
console.log($);
Then wait a few seconds and do this again:
console.log($);
So it takes a while for jQuery to load. I tried this suggestion, which seems to be the consensus of all related questions:
+function loadScript(url, callback)
{
// Adding the script tag to the head as suggested before
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
}("http://code.jquery.com/jquery-1.7.1.min.js", function(){console.log($);});
And once again it doesn't work ...
The first console.log($) should give the correct result. What can I do to execute a function as soon as jQuery has loaded and executed?
(Background: I'm writing a Chrome extension to fix formatting on a page that doesn't use jQuery.)
function loadScript(url, callback){
var foo1 = document.createElement('script');
foo1.type = 'text/javascript';
foo1.setAttribute('src', url);
foo1.onreadystatechange = callback;
foo1.onload = callback;
var head = document.getElementsByTagName('head')[0];
head.appendChild(foo1, head);
}
loadScript(('https:' == document.location.protocol ? 'https://' : 'http://') +'code.jquery.com/jquery-1.11.0.min.js', function(){
console.log($);
});
Related
I am trying to load some scripts after DOMContentLoaded event and I am trying to use the following script for this. I'm not sure if the following is the best way to do this but I am having an issue with the following code because I need to load jquery first because my other scripts are depend on it. I have no idea how to do this any help would be greatly appreciated. Thank you very much.
<script>
document.addEventListener('DOMContentLoaded', function() {
var script = document.createElement('script');
script.src = 'https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js';
document.getElementsByTagName('body')[0].appendChild(script);
var script1 = document.createElement('script');
script1.src = '/myscript1.js';
document.getElementsByTagName('body')[0].appendChild(script1);
var script2 = document.createElement('script');
script2.src = '/myscript2.js';
document.getElementsByTagName('body')[0].appendChild(script2);
});
</script>
Please know that dynamic scripts behave as async by default, which means that the script that loads first will also run first. So, the issue might be here that myscript1.js & myscript2.js are very small scripts and thus it loads and runs first before jquery script could load. To fix this you can pass script.async=false to each script so that script loads and run in the order they are being added to the document like:
document.addEventListener('DOMContentLoaded', function() {
var script = document.createElement('script');
script.src = 'https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js';
script.async = false;
document.getElementsByTagName('body')[0].appendChild(script);
var script1 = document.createElement('script');
script1.src = '/myscript1.js';
script.async = false;
document.getElementsByTagName('body')[0].appendChild(script1);
var script2 = document.createElement('script');
script2.src = '/myscript2.js';
script.async = false;
document.getElementsByTagName('body')[0].appendChild(script2);
});
and if you want to keep things DRY (Don't repeat yourself), you can use a helper function like:
document.addEventListener('DOMContentLoaded', function() {
function loadScript(src) {
let script = document.createElement('script');
script.src = src;
script.async = false;
document.getElementsByTagName('body')[0].appendChild(script);
}
loadScript('https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js');
loadScript('/myscript1.js');
loadScript('/myscript2.js');
});
I am loading Mootools dynamically in the scripting part of an app (AutoWWW) because it does not allow direct HTML usage.
I am using Request.HTML and want to get the html of a page but it returns an 'undefined' message. How can i fix this?
My code:
function loadScript(url, callback) {
// Adding the script tag to the head as suggested before
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
}
var mootools = new Request({
url: 'http://google.com',
method: 'get',
onSuccess: function(responseText){
alert(responseText);
}
});
loadScript("https://ajax.googleapis.com/ajax/libs/mootools/1.6.0/mootools.min.js", mootools);
There are 2 things you should take into account. One is possible CORS limitations, the other is that when you do head.appendChild(script); it will load the script asynchronously.
This means MooTools will be loaded but it will not be available until the callback function is called. To fix this you should have the callback internally inside the loadScript function, and from inside that callback call the other callback that was passed as function argument.
function loadScript(url, callback) {
// Adding the script tag to the head as suggested before
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.onreadystatechange = callback;
script.onload = function() {
new Request({
url: 'https://jsonplaceholder.typicode.com/posts/1',
method: 'get',
onSuccess: callback
}).send();
};
script.src = url;
head.appendChild(script);
}
loadScript("https://ajax.googleapis.com/ajax/libs/mootools/1.6.0/mootools.min.js", function(text) {
alert(text);
});
I have a script which load a javascript file run-time or async
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'file.js';
s.onreadystatechange = function(){
console.log(this.readyState)
};
s.onload = function(){
console.log('onload')
};
body.appendChild(s);
The problem is that when s.onload is triggered and onload is printed in the console the script isn't loaded completely and when calling a function from the file undefined is returned
If a setTimeout is setup after the script is onload it works, but that isn't good practice
Have made some research on the topic and found the onreadystatechange event.. But the event is never triggered in my code?!
How to add an event which is triggered when the script is completely loaded?
The order is important. Append the element first and add the src last:
var s = document.createElement('script');
s.type = 'text/javascript';
body.appendChild(s);
s.onreadystatechange = function(){
console.log(this.readyState)
};
s.onload = function(){
console.log('onload')
};
s.src = 'file.js';
Im trying to write a script that will append the jquery cdn script
to the body of the document.
function addJquery() {
url = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.body.appendChild(script);
}
addJquery();
What am i doing wrong here
You can't add scripts to the body and have them execute. Late-loaded scripts must be loaded through the head element:
(function addJQuery() {
var url = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
var script = document.createElement('script');
script.url = url;
script.onload = function() { addJQuery(); }
document.head.appendChild(script);
}());
However, this loads jQuery regardless of whether it's already loaded, so that's no good. Here's what you generally want instead:
(function loadMyCode() {
// do we have jquery? if not, load it.
if (typeof jQuery === "undefined") {
var url = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
var script = document.createElement('script');
script.url = url;
script.onload = function() {
// this will run after jquery gets loaded
loadMyCode();
}
document.head.appendChild(script);
return;
}
// if we get here, we know we have jquery
//
// rest of the code goes here.
}());
This is another way
(function () {
var li = document.createElement('script');
li.type = 'text/javascript';
li.src= "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
li.async=true;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(li, s);
})();
I am trying to use GoogleMaps.InfoBox on my project, but before load this script, the GoogleMaps API has to be loaded.
Right now I have this code to load everything:
/**
* Load scripts asynchronously
*/
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=-MY-KEY-&sensor=true&callback=initialize";
document.body.appendChild(script);
var scriptInfoBox = document.createElement("script");
scriptInfoBox.type = "text/javascript";
scriptInfoBox.src = "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js";
document.body.appendChild(scriptInfoBox);
}
But not always the GoogleMaps API is loaded before than GoogleMaps.InfoBox one.
How can I load JS sorted, waiting for complete the previous one?
You can use the load event of the scripts:
function loadScript(callback) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=-MY-KEY-&sensor=true&callback=initialize";
document.body.appendChild(script);
script.onload = function() {
var scriptInfoBox = document.createElement("script");
scriptInfoBox.type = "text/javascript";
scriptInfoBox.src = "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js";
document.body.appendChild(scriptInfoBox);
scriptInfoBox.onload = callback;
};
}
However, you will need to adapt the code a bit to make it crossbrowser-safe like this.
Just use regular script tags right before </body>.
<script src="http://maps.googleapis.com/maps/api/js?key=-MY-KEY-&sensor=true&callback=initialize"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js"></script>
By default, browsers will execute scripts in the order they appear.