I have script (myscript.js) which create div and animate div in any HTML page. my script is using Jquery animation function
I am currently using following code (it's sample snippet)
<script src="jquery.js"><script>
<script src="myscript.js"><script>
But is this possible to use only following code which can automatically add JQuery library also?
<script src="myscript.js"><script>
Insert this on top of your myscript.js
var h=document.getElementsByTagName('head')[0];
var s=document.createElement('script');
s.type='text/javascript';
s.src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js';
h.appendChild(s);
but you will have to wait until script loaded using waitforload function
function w4l(){
if (typeof jQuery != "function"){
setTimeout("w4l()", 1000);
return;
}else{
//Do Jquery thing
}
}
w4l();
or just simply copy all jquery.js code file into your myscript.js, AKA merge 2 file into one
To make sure that the rest of myscript.js doesn't get executed before jQuery is loaded, use something like this:
function dostuff() {
//animate elements, etc.
}
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'jquery.js';
script.onreadystatechange = dostuff;
script.onload = dostuff;
head.appendChild(script);
Note: it's a bit unclear why you wouldn't want to explicitly add the jQuery part in your head.
Related
I need to include jQuery library in javascript file (john.js) remotely. I have tried this without any luck;
(function(d, t) {
var g = d.createElement(t), // create a script tag
s = d.getElementsByTagName(t)[0]; // find the first script tag in the document
g.src = 'http://code.jquery.com/jquery-latest.js'; // set the source of the script to your script
s.parentNode.insertBefore(g, s); // append the script to the DOM
}(document, 'script'));
$( document ).ready(function() {
// My jquery works here
});
I want to fetch a script in javascript way. What is the correct way to do that ?
The error here is that JQuery is not loaded yet when this code is executed:
$(document).ready(function() { .. }
As is, you get an error like this: $ is undefined (or similar)
You should use the onload event of created script element to be sure it is loaded Jquery.
This sample shown how you can achieve your goal. Good Luck.
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://code.jquery.com/jquery-latest.js'; // set the source of the script to your script
newScript.onload = function() {
alert("Script is ready!");
$(document).ready(function() {
alert("JQuery is ready!");
});
};
var head = document.getElementsByTagName("head")[0];
head.appendChild(newScript);
Here is the answer on how to fetch, coming from an other post :
Adding <script> element to the DOM and have the javascript run?
That beeing said another issue you may have is that when you call your
$( document ).ready(function() {
// My jquery works here
});
Jquery may not be loaded yet
so you can try a recursive function to check if jquery has been loaded with something like that (not teste)...
function launch(callBack){
if (window.jQuery) {
callBack();
} else {
setTimeout(function(){launch(callBack);},100);
}
}
launch(function(){
$( document ).ready(function() {
// My jquery works here
});
});
You can use a combination of an XMLHttpRequest and eval to fetch the javascript file dynamically like getScript does for jQuery.
See my fiddle.
Typically the jquery is called in the html file before custom javascript files are called:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="app.js"></script>
I have this code in a script we use for initializing all of our applications, it loads the jQuery from the google CDN amongst several other things that all of our applications require. Then when we load the specific program functionality we check to make sure that jquery has loaded, in case the CDN is down. The problem I am running into is it is still loading the second one. If I add a simple alert("Test"); after the line headTag.appendChild(jqTag); it works perfectly, but if I remove the alert it uses the second one. What gives?
They are loaded like so:
<script type="text/javascript" src="i-initializer.js"></script>
<script type="text/javascript" src="i-program.js"></script>
initializer script:
if(typeof jQuery=='undefined'){
var headTag = document.getElementsByTagName("head")[0];
var jqTag = document.createElement('script');
jqTag.type = 'text/javascript';
jqTag.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js';
headTag.appendChild(jqTag);
}
Then in another script we have the following:
if(typeof jQuery=='undefined'){
var header = document.getElementsByTagName("head")[0];
var qtag = document.createElement('script');
qtag.type = 'text/javascript';
qtag.src = 'http://feedback.oursite.com/scripts/jquery-1.8.3.min.js';
qtag.onload = checkjQueryUI;
header.appendChild(qtag);
}
else
{
jQCode();
}
jQCode() {
...
}
This is the technique used by HTML5 Boilerplate. First it loads the Google CDN script, then immediately checks if the global jQuery object exists -- if it doesn't, the CDN failed and a local copy is loaded instead.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>')</script>
Your fallback code loads jQuery asynchronously.
That means that the rest of your scripts run before jQuery loads.
Adding an alert() call forces the rest of your code to wait (until you click OK); by the time that happens, jQuery will have loaded.
Instead, you can emit a new <script> tag using document.write() to load it synchronously.
Alternatively, you could wrap the rest of your code in a callback and call the callback(s) after jQuery loads.
If you do it this way, you should use a script loader library, which will handle all of that for you.
I am including jQuery in background_page like this,
<script type="text/javascript" src="libs/jquery.js"></script>
Here's the problem:
In websites, where jQuery plugins are used (with jQuery.extend method), they do not work when my extension is installed.
I guess this is because I had my jQuery.js over 'their' jQuery.js' file and all .extend do not work.
So, I thought of adding jQuery.js only when its not avaialable. So, I tried adding jQuery like this,
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "libs/jquery.js";
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
But no luck.
Can someone suggest me a good way to add jQuery.js file in background page.
I really like your approach here, but I would recommend enwrapping your declaration inside of a load event listener:
if (window.addEventListener) {
window.addEventListener('load', init, false);
} else if (window.attachEvent) { // for IE8 and below
window.attachEvent('onload', init);
}
function init() {
if (typeof jQuery === 'undefined') {
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "libs/jquery.js";
document.getElementsByTagName('head')[0].appendChild(script);
}
}
I think the issue may be that at the time you're asking if jQuery is an object, that the DOM hasn't loaded yet.
Alternatively, you can load jQuery via your Manifest File under content_scripts: http://code.google.com/chrome/extensions/dev/content_scripts.html
Found an answer later,
Doing
jQuery.nocConflict
jQ = jQuery.noConflict
and replacing $ with jQ everywhere, solved the problem.
Conclusion: content_scripts can also interfere with webpage javascripts.
Here is what i want to do.
Normally we can call javascript functions on different event, button clicks within the page provided that script is already in the page (may be in head section) or it has been loaded in the head section from external js file on load time.
Is it possible to load an external js file not when the page loads but at a later stage when (say) a button is clicked.
I know this is easily possible in JQuery:
$.getScript("url to js file", function(){});
But i want to know how can we do the same using simple javascript within the page without JQuery?
Dynamically create the script element :
<script>
var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript= document.createElement("script");
oScript.type = "text/javascript";
oScript.src="other.js";
oHead.appendChild( oScript);
</script>
You do it like this:
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'helper.js';
head.appendChild(script);
<script language="javascript">
document.write("<script src='other.js'><\/script>");
</script>
other options are here
Is it possible to load certain scripts like
<script type="text/javascript" src="somescript.js"></script>
when the rest of the page has loaded?
Imagine I have a few larger script files like this that are not needed when the page is loaded. E.g. I'm using the Google Maps API that is only used when a button is clicked (so not on page load).
Is it possible to load the rest of the page first, before processing all those script tags in my head?
In JQuery you could do this on document ready
$.getScript("somescript.js", function(){
alert("Script loaded and executed.");
});
simply you can add into that script file defer parameter
<script src="pathToJs" defer></script>
you can check this question as well
It is possible. I was doing a similar thing in an AJAX intensive site, but I was loading the Google Charts API. Here is the code I used to load the Google Charts API when a button was clicked on the page.
function loadGoogleChartsAPI() {
var script = document.createElement("script");
// This script has a callback function that will run when the script has
// finished loading.
script.src = "http://www.google.com/jsapi?callback=loadGraphs";
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
}
function loadGraphs() {
// Add callback function here.
}
This uses a callback function that will run when the script has loaded.
No one mentioned these?
$(window).load(function(){
// do something
});
or
$(window).bind("load", function() {
// do something
});
$(document).ready(function() {
var ss = document.createElement("script");
ss.src = "somescript.js";
ss.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(ss);
});
Please see my code. The onload event will occur when the script has finished loading. Or the onerror event will occur.
function loadJavaScript() {
var script = document.createElement("script");
script.src = "javaScript.js";
script.type = "text/javascript";
script.onload = function () {
console.log('script was loaded successfully');
}
script.onerror = function (e) {
console.error('script.onerror');
}
document.getElementsByTagName("head")[0].appendChild(script);
}
Thanks to answer.
Also see my code of the load of the script.
use the getScript method of jquery! or try simply to put this script on the end of the page?
Yes, this is possible by dynamically injecting the JavaScript files from code. There are lots of libraries which you can use:RequireJS, HeadJS etc. Recently I found this document which compares lots of JavaScript loader libraries.
To just allow the page to show before your script is loaded, use the async attribute:
<script src="//url/to/script.js" async></script>
To hide the loading spinner in the browser, append the script tag after the page finished loading:
<script>
document.addEventListener('DOMContentLoaded', function() {
var script = document.createElement('script');
script.src = '//url/to/script.js';
document.getElementsByTagName('body')[0].appendChild(script);
});
</script>
Yep, that's completely possible. Add an onLoad="foo();" event to your <body> tag and have it invoke your scripts. You'll need to wrap your external JS in a function and do something like:
//EXTERNAL JS (jsstuff.js)
function Mojo() {
document.getElementById('snacks').style.visibility = "visible";
alert("we are victorious!");
}
//YOUR HTML
<html>
<head>
<script type='text/javascript'></script>
</head>
<body onLoad='Mojo();'>
<div id='snacks'>
<img src='bigdarnimage.png'>
</div>
</body>
</html>