homepage Welcome to WebmasterWorld Guest from 54.161.181.49
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




msg:4454523
 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




msg:4454576
 1:30 pm on May 17, 2012 (gmt 0)


Fotiman




msg:4454611
 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




msg:4454846
 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




msg:4454858
 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