...

View Full Version : include a .js file in the head after your html is loaded



dknight3
08-10-2006, 10:34 AM
is this possible?

i tried this, but it doesnt work (not sure why):


<html>
<head>
<script type="text/javascript">
var divsloaded = 0;
if (divsloaded == 1){
document.write('<script type="text/javascript" src="main.js"></'+'script>');
}
</script>
</head>
<body>
<div id="main"></div>
<div id="results"></div>
<script type="text/javascript">var divsloaded = 1;</script>
</body>
</html>

vwphillips
08-10-2006, 10:36 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

var JSAdd;
var CSSAdd;

function AddJS(name){
if (getFile(name)==null){ return; }
head=document.getElementsByTagName('HEAD')[0];
// next line removes the previously added External JavaScript
if (JSAdd){ head.removeChild(JSAdd); }
JSAdd=document.createElement('SCRIPT');
JSAdd.type='text/javascript';
JSAdd.src=name;
head.appendChild(JSAdd);
}

function AddCSS(name){
if (getFile(name)==null){ return; }
head=document.getElementsByTagName('HEAD')[0];
// next line removes the previously added StyleSheet
if (CSSAdd){ head.removeChild(CSSAdd); }
CSSAdd=document.createElement('LINK');
CSSAdd.rel='stylesheet';
CSSAdd.type='text/css';
CSSAdd.href=name;
head.appendChild(CSSAdd);
}

function getFile(filename){
oxmlhttp = null;
try {
oxmlhttp = new XMLHttpRequest();
oxmlhttp.overrideMimeType("text/xml");
}
catch(e){
try { oxmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
catch(e){ return null; }
}
if(!oxmlhttp) return null;
try {
oxmlhttp.open("GET",filename,false);
oxmlhttp.send(null);
}
catch(e){ return null; }
return oxmlhttp.responseText;
}


function Test(){
alert('An External JavaScript\nhas not been Added');
}

/*]]>*/
</script>

</head>

<body>
<input type="button" name="" value="Add JS fred.js" onclick="AddJS('fred.js');" /><br />
<input type="button" name="" value="Add JS tom.js" onclick="AddJS('tom.js');" /><br />
<input type="button" name="" value="Test" onclick="Test();" />
<br />
<br />
<input type="button" name="" value="Add CSS ss1.css" onclick="AddCSS('ss1.css');" /><br />
<input type="button" name="" value="Add CSS ss2.css" onclick="AddCSS('ss2.css');" /><br />
<span class="color" >Some Test Text</span>
</body>

</html>

dknight3
08-10-2006, 10:39 AM
hahahahaha i think you misunderstood, lol

i just want to include it after the html is loaded, like, the same file, every time, no ajax, i got that done already..

the reason i want this is because the javascript goes before the divs and when i use getElementById it doesnt work cause there not created yet..

Thanks for the fast reply tho!

vwphillips
08-10-2006, 10:52 AM
need to put your code in a function and call with a <BODY> or window onload event

e.g.

<BODY onload="MyFunction();" >

dknight3
08-10-2006, 11:02 AM
nope that is executed before the html...

vwphillips
08-10-2006, 12:06 PM
<html>
<head>
<script type="text/javascript">
function ToldYouSo(){
document.getElementById('main').innerHTML='Told You So';
document.getElementById('results').innerHTML='Told You So';
}
</script>
</head>
<body onload="ToldYouSo();">
<div id="main"></div>
<div id="results"></div>
</body>
</html>

dknight3
08-10-2006, 01:12 PM
hmm i apolagize, your right, there must be an error somewhere else in my script i guess...

it will work but in the javascript debugger thing in firefox it says the get element by id or whatever is empty. and it keeps loading the page and says reading in the status bar...

wierd ill check it out tomorrow i guess..

RexxCrow
08-10-2006, 09:46 PM
That is just what I have been looking for... a script that rubs in the fact that I am completely wrong! Thanks Phillips, :D j/k

dknight3
08-10-2006, 10:04 PM
hmmmmm thats really wierd, when i have:
index.html


<html>
<head>
<script type="text/javascript" src="main.js"></script>
</head>
<body onload="ToldYouSo();">
<div id="main"></div>
<div id="results"></div>
</body>
</html>

and main.js


function ToldYouSo(){
document.getElementById('main').innerHTML='Told You So';
document.getElementById('results').innerHTML='Told You So';
}

it works!
but when i have it like this:
index.html


<html>
<head>
<script type="text/javascript">
function ToldYouSo(){
document.write('<script type="text/javascript" src="main.js"></'+'script>');
}
</script>
</head>
<body onload="ToldYouSo();">
<div id="main"></div>
<div id="results"></div>
</body>
</html>

and main.js


document.getElementById('main').innerHTML='Told You So';
document.getElementById('results').innerHTML='Told You So';

it doesnt work, im soooo confused

dknight3
08-10-2006, 10:09 PM
wow this is so frustrating, i even used the first method and it still doesnt work when im using my script... www.cleanscripts.com/ajax i just dont understand javascript..

vwphillips
08-10-2006, 10:25 PM
document.write may only be used when the page is first rendered and should be avoided

dknight3
08-10-2006, 10:43 PM
yes i just discovered this, thanks this explains ALOT!

i cant for the life of me figure out why the DOM method doesnt work though firefox keeps saying, "element refrenced by id/name in the global scope, use wc3 standard getElementById() instead"



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum