Welcome to WebmasterWorld Guest from 54.161.57.177

Forum Moderators: open

Message Too Old, No Replies

Load Javascript for only a few

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

Full Member

5+ Year Member Top Contributors Of The Month

joined:Sept 30, 2009
posts:226
votes: 1


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)

Junior Member

5+ Year Member

joined:Nov 16, 2008
posts:136
votes: 0


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

Senior Member from US 

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

joined:Oct 17, 2005
posts: 4988
votes: 12



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)

Full Member

5+ Year Member Top Contributors Of The Month

joined:Sept 30, 2009
posts:226
votes: 1


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)

Senior Member from US 

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

joined:Oct 17, 2005
posts: 4988
votes: 12


Glad to help. :)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members