homepage Welcome to WebmasterWorld Guest from 54.226.10.234
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Load Javascript for only a few
ocon

5+ Year Member



 
Msg#: 4454521 posted 11:19 am on May 17, 2012 (gmt 0)

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>

 

skoff

5+ Year Member



 
Msg#: 4454521 posted 1:30 pm on May 17, 2012 (gmt 0)


Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4454521 posted 2:35 pm on May 17, 2012 (gmt 0)


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);
}

ocon

5+ Year Member



 
Msg#: 4454521 posted 3:24 am on May 18, 2012 (gmt 0)

Thank you very much. I'm not using jQuery, but the alternative script worked very well for me.

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4454521 posted 4:01 am on May 18, 2012 (gmt 0)

Glad to help. :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved