CODEWITHSUNDEEP
javascriptjqueryhtml
Mahmoud Arafa
Mahmoud Arafa

Reputation: 63

Invoke JavaScript function in ".js" file after a page loads from HTML file

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

Answers (6)

Fylax
Fylax

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

nabilinfo
nabilinfo

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

Tschallacka
Tschallacka

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

James Wakefield
James Wakefield

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

gwer
gwer

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

Sumit Vairagar
Sumit Vairagar

Reputation: 556

Probably you can use the same

$(document).ready(function() {  
   alert("Hello World!");  
});

In the external file?

Upvotes: 0

Related Questions