Reputation: 63
I know that we can call a JavaScript function on page load using jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript">
<script type="text/javascript">
$(document).ready(function() {
alert("Hello World!");
});
</script>
But how to do it if the function is inside an external ".js" file?
And another question please, can "src" tag have a value like this: src = "http://google.com"? I mean without the ".js"suffix at the end of it.
Thanks
Edit: What I mean by "external" is just another file on my desktop, not on the web.
Upvotes: 2
Views: 1974
Reputation: 1128
All the JavaScript files you load are on same scope: your DOM. So it doesn't matter from which file you are loading one function and from which file you are loading another function. As long as you load all required files there's no problem.
For instance I recently developed an OOP JS project and I had js/namespace/class.js
files. Of course on class used another one (even from different namespaces).
I had an insane long head (with lot of imports) but everything just worked fine.
Regarding your second question: The src field must point to a valid JS resource. src="//something.org/resource"
in valid if it's a REST js resource (routed by server) instead a plain file. It just matters that it is a valid JS "string"
Let's take this example:
//mysite.org/rest/js1
var greet = function() {
alert("Hello World!");
}
//mysite.org/rest/js2
$(document).ready(function() {
greet();
}
http[s]://mysite.org
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="//mysite.org/rest/js1" type="text/javascript"></script>
<script src="//mysite.org/rest/js2" type="text/javascript"></script>
Swapping import for js1
and js2
may break it all, so be carefull with order.
Upvotes: 1
Reputation: 49
You can load all javascript files inside script tag, then you can call any function like :
$(document).ready(function() {
yourFuntion();
});
PS: do not forget to call your function before javascript files.
Upvotes: 0
Reputation: 28742
<script type="text/javascript">
function myfunction() {
alert('it has loaded');
};
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript" onload="myfunction()">
Just make sure to define your function BEFORE the code that calls the external code. Just in case the code is cached and executed immedeately before the page arrives at your code.
You can do a complete javascript version too:
function myfunction() {
alert('script has loaded');
}
function loadJS(url, callback){
//url is URL of external file, callback is the code
//to be called after file has loaded
var scriptTag = document.createElement('script');
scriptTag.src = url;
scriptTag.onload = callback;
scriptTag.onreadystatechange = callback;
document.body.appendChild(scriptTag);
};
loadJS('http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js', myfunction);
Upvotes: 0
Reputation: 526
Yes, it doesn't need to have a .js extension you can load any js file from any server, no matter how malicious the site may be. It does have to be a valid js file served with the appropriate header though. Google.com isn't one... it's a html file. If you are on https: domain all resources will also need to be HTTPS or they will be skipped
In your above example $
is an external function loaded from one of googles pages!
Upvotes: 0
Reputation: 614
In external .js-file you can do the same. But file should be after jQuery in DOM.
Without jQuery you can use next code:
window.onload = function () {alert('Hello World!')
And another question please, can "src" tag have a value like this: src = "http://google.com"? I mean without the ".js"suffix at the end of it.
Yes, you can.
Upvotes: 1
Reputation: 556
Probably you can use the same
$(document).ready(function() {
alert("Hello World!");
});
In the external file?
Upvotes: 0