including javascript files and body onload

**tbobker** · 11-26-2008, 03:03 PM

I want some javascript to execute when the page loads but without having to specify the "onload" in the body tag.

Is there a way i can specify this in the file that i include.

So basically, i have included divs in my page:

<div class="tag"></div>

My included javascript file should scan the page for these divs using document.getElementsByClassName("tag")

and then use the .innerHTML to put what ever i want inside.

any ideas

**jscheuer1** · 11-26-2008, 04:12 PM

Just replace all instances of myInitFunction with the name of the function you want to run onload:

Code:

if(typeof window.addEventListener!='undefined')
window.addEventListener('load', myInitFunction, false);
else if(typeof window.attachEvent!='undefined')
window.attachEvent('onload', myInitFunction);
else{
if(window.onload!=null){
var oldOnload=window.onload;
window.onload=function(e){
oldOnload(e);
myInitFunction();
};}
else
window.onload=myInitFunction;
}

**tbobker** · 11-26-2008, 06:45 PM

Hi

I worked out using window.onload = myfunction;

however what is all the other stuff you have done before hand.

**jscheuer1** · 11-27-2008, 06:25 AM

Browsers allow for only one onload event per page. Modern browsers allow for addEventListener and/or attachEvent to allow multiple functions to be added/attached to onload and other events for the page. Saving the old onload (if any) and creating a new onload function with an added function will accomplish this same thing for older browsers. When there are more than one onload functions desired, if you use the routine I've outlined for each onload function, they will all get fired. Unless something like that is done, or they are combined in some other fashion, only the last one parsed by the browser will fire.

**molendijk** · 11-28-2008, 12:44 AM

So you want to include a file (for instance: 'to_be_included.html') into another file (for instance: 'main.html'), where 'to_be_included.html' should contain functions that write innerHTML to divs contained in 'main.html'?
That is possible. In 'to_be_included.html', put in the head:

Code:

<script type="text/javascript">
function add1(strTag,strClass) {
	for (i=0;i<top.document.getElementsByTagName(strTag).length; i++) {
		if (top.document.getElementsByTagName(strTag).item(i).className == strClass){
var TheItem=top.document.getElementsByTagName(strTag).item(i);			
TheItem.innerHTML = 'Inner1';
}
}
}

function add2(strTag,strClass) {
	for (i=0;i<top.document.getElementsByTagName(strTag).length; i++) {
		if (top.document.getElementsByTagName(strTag).item(i).className == strClass){
var TheItem=top.document.getElementsByTagName(strTag).item(i);			
TheItem.innerHTML = 'Inner2';
}
}
}
</script>

and in the body:

<body onload="add1('div','tag1');add2('div','tag2');">
And this is text from the included file ('to_be_included.html') that added 'Inner1' and 'Inner2' above.

Then in the head of 'main.html':

Code:

<!-- Javascript include   -->
<script type="text/javascript">
if(window.opera)
{document.write('<iframe src="to_be_included.html" width="0" height="0" name="menu" ></iframe>');}
else document.write('<object type="text/html" data="to_be_included.html" width="0" height="0" name="menu" ></object>');
function extractMenu(){
try{
document.body.innerHTML+=window.frames['menu'].body.innerHTML;
}
catch(e){
document.body.innerHTML+=window.frames['menu'].document.body.innerHTML;
}
}
window.onload=extractMenu; 
</script>

and in the body of 'main.html':

Code:

<body>
<div class="tag1" ></div><br>
<div class="tag2" ></div><br>
...

Note:
I don't know why you want to do what you asked for. If you have special reasons to write content to a main file with the help of functions in an included file, then try my solution. But if all you want to do is multiple onloads, then John's solution (given above) is the simplest one.
===
Arie Molendijk.

Thread: including javascript files and body onload

Thread Tools

Search Thread

including javascript files and body onload

Bookmarks

Bookmarks

Posting Permissions