zwei Scripts mit window.onload - wie umgehen?

[Toni]

Huhu :-)
In Form eines Schulprojekts für Informatik muss ich meine JavaScript-Kenntnisse vertiefen. Dafür habe ich nun mit dem HTML Editor erstmal eine Seite erstellt, auf der ich möglichst viele Scripts einbauen wollte. Zwei sind schon drin, einmal dieser:

var quotes = ["quote1", "quote2", ...]  
;window.onload = function() {document.getElementById("zitat").innerHTML = quotes[(Math.random()*quotes.length) | 0];}  

Damit möchte ich Kurzinformationen auf der Startseite geben in einer Tabelle unter dem Banner, die sich bei jedem neu laden der Seite verändern (ich habe den Inhalt jetzt mal raus genommen, damit der Code sich nicht ewig in die Breite zieht).

Der zweite ist dieser hier:

function tabberObj(argsObj)  
  
{var arg;this.div=null;this.classMain="tabber";this.classMainLive="tabberlive";this.classTab="tabbertab";this.classTabDefault="tabbertabdefault";this.classNav="tabbernav";this.classTabHide="tabbertabhide";this.classNavActive="tabberactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabberid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg];}  
  
this.REclassMain=new RegExp('\\b'+this.classMain+'\\b','gi');this.REclassMainLive=new RegExp('\\b'+this.classMainLive+'\\b','gi');this.REclassTab=new RegExp('\\b'+this.classTab+'\\b','gi');this.REclassTabDefault=new RegExp('\\b'+this.classTabDefault+'\\b','gi');this.REclassTabHide=new RegExp('\\b'+this.classTabHide+'\\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null;}}  
  
tabberObj.prototype.init=function(e)  
  
{var  
  
childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false;}  
  
if(e.id){this.id=e.id;}  
  
this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1;}}}  
  
DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title='';}  
  
if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"");}  
  
break;}}}  
  
if(!t.headingText){t.headingText=i+1;}  
  
DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabber=this;DOM_a.tabberIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabberid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,''));DOM_a.id=aId;}  
  
DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li);}  
  
e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabber:this});}  
  
return this;};tabberObj.prototype.navClick=function(event)  
  
{var  
  
rVal,a,self,tabberIndex,onClickArgs;a=this;if(!a.tabber){return false;}  
  
self=a.tabber;tabberIndex=a.tabberIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabber':self,'index':tabberIndex,'event':event};if(!event){onClickArgs.event=window.event;}  
  
rVal=self.onClick(onClickArgs);if(rVal===false){return false;}}  
  
self.tabShow(tabberIndex);return false;};tabberObj.prototype.tabHideAll=function()  
  
{var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i);}};tabberObj.prototype.tabHide=function(tabberIndex)  
  
{var div;if(!this.tabs[tabberIndex]){return false;}  
  
div=this.tabs[tabberIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide;}  
  
this.navClearActive(tabberIndex);return this;};tabberObj.prototype.tabShow=function(tabberIndex)  
  
{var div;if(!this.tabs[tabberIndex]){return false;}  
  
this.tabHideAll();div=this.tabs[tabberIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabberIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabber':this,'index':tabberIndex});}  
  
return this;};tabberObj.prototype.navSetActive=function(tabberIndex)  
  
{this.tabs[tabberIndex].li.className=this.classNavActive;return this;};tabberObj.prototype.navClearActive=function(tabberIndex)  
  
{this.tabs[tabberIndex].li.className='';return this;};function tabberAutomatic(tabberArgs)  
  
{var  
  
tempObj,divs,i;if(!tabberArgs){tabberArgs={};}  
  
tempObj=new tabberObj(tabberArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabberArgs.div=divs[i];divs[i].tabber=new tabberObj(tabberArgs);}}  
  
return this;}  
  
function tabberAutomaticOnLoad(tabberArgs)  
  
{var oldOnLoad;if(!tabberArgs){tabberArgs={};}  
  
oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabberAutomatic(tabberArgs);};}else{window.onload=function(){oldOnLoad();tabberAutomatic(tabberArgs);};}}  
  
if(typeof tabberOptions=='undefined'){tabberAutomaticOnLoad();}else{if(!tabberOptions['manualStartup']){tabberAutomaticOnLoad(tabberOptions);}}  
  
  
  
/*CODE (c) BY 2006 Patrick Fitzgerald */

Anstatt mit Frames zu arbeiten sollte ich es so möglich machen, verschiedene "Seiten" innerhalbn der gesamten Seite aufzurufen. Beide Scripts sind extern eingebunden. Sind beide zusammen drin funktioniert nur eines, einzeln funktionieren sie beide.
Im Internet fand ich eine mögliches Problem, nämlich dass man nicht zwei Scripts mit window.onload Funktion einbinden kann, da die Seite sich ja nur einmal lädt. Leider habe ich kaum Ahnung von JavaScripts, alelrdings hat auch das Durchforsten vieler verschiedener Seiten zu dem Thema zu keiner Lösung geführt. Vielleicht weiß ja hier jemand einen Rat?
Vielen Dank schonmal :-)

[peter]

Hi,

in welcher Reihenfolge hast du denn beide in die Seite eingebunden?

Hier steckt doch schon die Lösung drin:

function tabberAutomaticOnLoad(tabberArgs)

{var oldOnLoad;if(!tabberArgs){tabberArgs={};}

oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabberAutomatic(tabberArgs);};}else{window.onload=function(){oldOnLoad();tabberAutomatic(tabberArgs);};}}
.....

/*CODE (c) BY 2006 Patrick Fitzgerald */[/code]

[Toni]

Ich habe zuerst das Script zu den Tabs, also das längere, danach das kürzere Script. Ich versuche einfach mal, die Lösung von Matthias umzusetzen, mal schauen ob ich das hin bekomme :-)
LG

[peter]

Ich habe zuerst das Script zu den Tabs, also das längere, danach das kürzere Script. Ich versuche einfach mal, die Lösung von Matthias umzusetzen, mal schauen ob ich das hin bekomme :-)
LG

Notfalls die beiden Scripte in anderer Reihenfolge einbinden, also erst das kürzere und dann das lange. Das behandelt nämlich das dann bereits vorhandene "onload" des kürzeren Scripts automatisch, siehe auch Antwort von molily.

Trotzdem sinnvoll, sich mit dem ganzen mal auseinanderzusetzen und zu verstehen.
Die Artikel von molily sollten dazu hervorragend geeignet sein. Lies dort ruhig auch mal weiteres z.B. zu den Grundlagen, ist durchaus empfehlenswert.

gruß
peter

[molily]

Hallo,

Im Internet fand ich eine mögliches Problem, nämlich dass man nicht zwei Scripts mit window.onload Funktion einbinden kann, da die Seite sich ja nur einmal lädt. Leider habe ich kaum Ahnung von JavaScripts, alelrdings hat auch das Durchforsten vieler verschiedener Seiten zu dem Thema zu keiner Lösung geführt. Vielleicht weiß ja hier jemand einen Rat?

Unter window.onload kann nur eine Funktion gespeichert werden. Die kann natürlich mehrere weitere Funktionen aufrufen.

window.onload = function () {  
  initScript1();  
  initScript2();  
};

Das ist das sogenannte traditionelle Event-Handling. Du kannst besser das flexiblere W3C DOM Events verwenden:

window.addEventListener('load', initScript1, false);  
window.addEventListener('load', initScript2, false);

So müssen beide Scripte nicht voneinander wissen.

Siehe auch DOMContentLoaded.

> function tabberAutomaticOnLoad(tabberArgs) {  
>   var oldOnLoad = window.onload;  
>   if(typeof window.onload != 'function'){  
>     window.onload = function(){  
>       tabberAutomatic(tabberArgs);  
>     };  
>   } else {  
>     window.onload = function(){  
>       oldOnLoad();  
>       tabberAutomatic(tabberArgs);  
>     };  
>   }  
> }

Übrigens unterstützt dieses Script bereits mehrere Zuweisungen an onload. Wenn vorher window.onload gesetzt wurde, so erzeugt dieses Script eine neue Funktion (JavaScript-Closure), die die alte Handlerfunktion einschließt und aufruft.

Mathias