3 years ago (2015-09-28 17:09:17)

Loading JavaScript files with jQuery .load() function in Different ways

9 0
479

There is no easy way to load JavaScript file or snippet with jQuery .load() function. Ofcourse jQuery provided a solution .getScript() for that but it seems meaning less in some conditions. We'll try some simple manner of getting script files loaded with HTML.

<script type="text/javascript">
var s = document.createElement('script');
s.src = '/path/ScriptFile.js';
s.onload = function(){
if(s.loaded){return;}
s.loaded = true;
//do something here to use the new script
howdy();
};
s.onreadystatechange = function(){
if (this.readyState === 'complete' || this.readyState === 'loaded') {
if(s.loaded){return;}
s.loaded = true;
//do something here to use the new script
howdy();
}
};
document.getElementsByTagName('head')[0].appendChild(s);
</script>

The above snippet targets head element of the parent file and places it JavaScript inside it, I still amaze, that how ITS NOT VISIBLE there. But it works like magic.

It will work definitely but only with single external file only not with codes you have in your

<script type="text/javascript">
//crazy code here
</sc
ript>

Its time for a small trick, all scripts and files will be loaded including anything else but needs a little time to create and mutiple files to work. In hope of .load() Scripts, I travelled the Internet World but found nothing instead of sadness. But with my will POWER I've finally created a short cut for that, you can find that same thing used in Infeeds Open Graph on every topic to load Trend stats.

First  file is your complete HTML+Javascript+Other Stuffed file, suppose sidebar.html with multiple scripts included from external/internal source or a snippet.

create a file with single iframe, my_iframe.html that will load your first file sidebar.html, and on your page where you're going to load all that, just load the iframed file with .load(). Let's have an example of all files.

index.html

where I want to load other files using .load()

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#sidebar").load("/path/my_iframe.html");
});
</script>
</head>
<body>

<div id=some_div>
<!-- your some content -->
</div>

<div id="sidebar"></div>

</body>
</html>

my_iframe.html

to load third and final file where all your data is embeded

<iframe src="path/sidebar.html"></iframe>

sidebar.html

file where all your sidebar data is embeded

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="path/my_some_script1.js"></script>
<script src="path/my_some_script2.js"></script>
<script>
$(document).ready(function(){

//your crazy codes here

});
</script>

</head>
<body>

<div id=some_div>
<!-- your some content -->
</div>

</body>
</html>

And now you know how to load scripts with .load() function, but theres a problem with iframes they don not fit automatically in your style, you have to do some changes to make them clean for you:

<style>
iframe{
   overflow: hidden;
   border:0;
}
</style>

Okay, but what about .getScript(), lets a have a quick look.

<script>
   jQuery.getScript("/path/script.js", function(data, status, jqxhr) {
/* do something now that the script is loaded and code has been executed */
})
;
</script>

The .getScript() method returns a jqxhr so you can also use it as a follows:

<script>
   jQuery.getScript("/path/script.js")
   .done(function() {
/* your success code here */
})
   .fail(function() {
/* your else code here */
})
;
</script>

We know how to load single JavaScript file with jQuery .getScript() but what if you have multiple files to load, you don't have to copy and paste all that. David Hudson has created a simple multiple script loading function.

You can find it on GitHub

Sign up or Sign in for free.
And start a new thread.
No Threads
More notes by Ghazi Khan