Having one javascript load multiple other javascripts without touching the <head>

Question

I'm working for a company right now that has hundreds of pages that use a javascript to load a left sidebar. I didn't create the original, but have to work within its framework. I;m fairly new to Java, want to insert a new image slideshow (from http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm) into the this sidebar. Unfortunately, I need to load 3 other javascript files in this one, as well as create a div with the javascript for my slideshow to go in. I spent 6 hours on it today, trying multiple solutions I've found on this site and others, couldn't get it to work.

Is this possible?

I need to load "javaA.js", "javaB.js", & "javaC.js" from this script, which runs on over 500 pages. Part 2 is having a div created, but just this first part would help heaps.

Thanks in advance for help.

Solution Found:

Here's the code that ended up working for me:

function loadjscssfile(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)

if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
loadjscssfile("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", "js")
loadjscssfile("JavaA.js", "js")
loadjscssfile("JavaB.js", "js")

Have you included jQuery? If not, you cannot use $('head').append, but document.getElementsByTagName('head')[0].innerHTML += '<script ...></script>' — David Frank
– David Frank, Commented Mar 8, 2012 at 10:31
Do not confuse java with javascript. Those are two totally different things. — Michal B.
– Michal B., Commented Mar 8, 2012 at 10:37
This bit of code is from when I was just throwing anything in there in frustration. I've been trying the getElements approach, but not sure how to add multiple instances of code using the code you and MrCode provided — Justin
– Justin, Commented Mar 8, 2012 at 23:26

MrCode · Accepted Answer · 2012-03-08 10:35:45Z

1

Try this approach, where the script element is created and then appended to the head dynamically:

var headElem = document.getElementsByTagName("head")[0];         
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://www.site.com/file.js';

headElem.appendChild(newScript);

answered Mar 8, 2012 at 10:35

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Justin Over a year ago

Would I repeat this multiple times for each script, or add a new line in this code. like this var headElem = document.getElementsByTagName("head")[0]; var newScript = document.createElement('script'); newScript.type = 'text/javascript'; newScript.src = 'site.com/file.js'; newScript.type = 'text/javascript'; newScript.src = 'site.com/file2.js'; headElem.appendChild(newScript);

MrCode Over a year ago

@Justin, yes you can repeat it for multiple scripts, you don't need to repeat the first line though, that only needs to be defined once. If you're going to repeat this lots of times, you could create a simple function that accepts the script URL and does the include like includeScript('http://site.com/script.js').

Collectives™ on Stack Overflow

Having one javascript load multiple other javascripts without touching the <head>

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related