Welcome to WebmasterWorld Guest from 54.159.119.255

Forum Moderators: open

Message Too Old, No Replies

Load Javascript for only a few

     
11:19 am on May 17, 2012 (gmt 0)

5+ Year Member Top Contributors Of The Month



Currently I have to load a script for all users even though its used by few. I am trying to load this script dynamically inside another script but am not having any success.

Contents of http://www.example.com/example.js:

function func1() { return 'bird';}
function func2() { return '200';}


Works but loads example.js for all users:

<script type="text/javascript" src="http://www.example.com/example.js"></script>
<script type="text/javascript">
...
function called_only_a_few_times(){
var func1Val = func1();}
...
</script>


Does not work, but isn't loading example.js for everyone:

<script type="text/javascript">
...
function called_only_a_few_times(){
var eg=document.createElement("script");
eg.type="text/javascript";
eg.src="http://www.example.com/example.js";
document.getElementsByTagName("head").item(0).appendChild(eg);
var func1Val = func1();}
...
</script>
1:30 pm on May 17, 2012 (gmt 0)

5+ Year Member



2:35 pm on May 17, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month




Does not work, but isn't loading example.js for everyone:

<script type="text/javascript">
...
function called_only_a_few_times(){
var eg=document.createElement("script");
eg.type="text/javascript";
eg.src="http://www.example.com/example.js";
document.getElementsByTagName("head").item(0).appendChild(eg);
var func1Val = func1();}
...
</script>

That will load example.js asynchronously, which means it may or may not (probably not) be finished loading when you try and call func1() in the line following it. What you need is a callback when it has finished loading.

If you use jQuery, you could do something like this:


function called_only_a_few_times(){
var func1Val;
$.ajax({
url: 'http://www.example.com/example.js',
dataType: 'script',
cache: true,
success: function() {
func1Val = func1();
}
}
}
.

Alternatively

function called_only_a_few_times(){
var func1Val;
var eg = document.createElement("script");
eg.src = 'http://www.example.com/example.js';
// the type attribute is not needed/does not do anything
eg.onload = eg.onreadystatechange = function() {
var rs = this.readyState;
if (rs && rs != 'complete' && rs != 'loaded') return;
func1Val = func1();
};
// Instead of inserting in the head, insert before the first script tag
// since head could be omitted, but since we are in a script, we know
// there is at least 1 script element defined somewhere
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(eg, s);
}
3:24 am on May 18, 2012 (gmt 0)

5+ Year Member Top Contributors Of The Month



Thank you very much. I'm not using jQuery, but the alternative script worked very well for me.
4:01 am on May 18, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Glad to help. :)
 

Featured Threads

Hot Threads This Week

Hot Threads This Month