Gå til innhold

onLoad hindrer andre JS på en side..

Marvil

Anbefalte innlegg

Marvil

Marvil

Skrevet
Skrevet

Driver å tester noe greier, og har kommet til et lite problem, der en body onLoad hindrer at andre JS på siden ikke kjører.

Er klar over at onLoad bør unngås, men sliter litt med å finne ut hvordan dette bør gjøres (regner med det skal legges til en onloadgreie i selve JS-fila som kjøres?)..

 

De to JSene som kjøres er;

Styling av checkboxene

Mouseoverfunksjon i tabell

 

Demoside med feilen;

http://dev.sparklingblue.net/demo/1/ - Her styles checkboxene normalt, men onLoaden gjør at mouseoveren ikke fungerer

http://dev.sparklingblue.net/demo/2/ - Her er mouseoveren normal, men onLoaden fra over er fjernet, og istedet lagt til på en knapp som trigger stylingen (trykk så fungerer alt som det skal)

 

Jeg er altså ute etter at begge JSene skal kjøres når siden lastes, men litt usikker på hvordan..? :)

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Haraldson

Haraldson

Skrevet
Skrevet 

function addLoadEvent(func) {
 var oldonload = window.onload;
 if (typeof window.onload != 'function') {
window.onload = func;
 } else {
window.onload = function() {
  oldonload();
  func();
}
 }
}

 

Legg dette i en egen fil, kalt addLoadEvent.js. Inkluder filene på vanlig måte, i <head> eller i bunn av <body> alt ettersom, og bruk følgende nederst i hver funksjon du vil legge til på onload;

 

addLoadEvent(funksjonsnavn);

Lenke til kommentar
Marvil

Marvil

Skrevet
  • Forfatter
Skrevet (endret)

Har sikkert bommet på ettellerannet, men har laget JSen og lagt til addLoadEvent(initARC('makeMeAPrettyForm','radioOn','radioOff','checkboxOn','checkboxOff')); i ARC.js (har også prøvd addLoadEvent(initARC) uten hell).

 

Dette er gjort på demo 2 - http://dev.sparklingblue.net/demo/2/

 

Jeg har tydeligvis oversett noe ?

 

(har ikke lagt til addLoadEvent på tablecloth.js, da denne har en window.onload i bunnen allerede som gjør at JSen kjøres)

Endret av Marvil
Lenke til kommentar
luxus

luxus

Skrevet
Skrevet (endret)

Jeg syntes at man istedenfor å legge event-funksjoner direkte på DOM elementer, som window.onload = function() {}; gjør (og alle liknenden løsninger med domElement.onEvent = function() {};), bør man bruke element.addEventListener (W3C standar) / element.attachEvent (IE).

 

Dette er en litt annen måte å tenke på, enn å tilordne event-funksjoner direkte på elementene, men man unngår helt problematikken om man ønsker at flere funksjoner skal være knyttet opp til en og samme event, på et og samme element.

 

Siden IE har sitt eget metodenavn for dette, trengs det en liten innkapslinkgsfunksjon:

var addEventHandler = function(node, type, f) {
 if ( node.addEventListener ) { // w3c
   node.addEventListener(type, f, false); // false -> Events bobler bare opp i DOM, ikke ned -> opp.
 } else if ( node.attachEvent ) { // ie
   node.attachEvent("on"+type, f);
 } else { // Hvis alt annet feiler... noe det ikke burde i nyere browsere
   node["on"+type] = f;
 }
};

 

Du kan da gjøre dette:

addEventHandler(window, "load", onload1);
// Du oppnår nå ca det samme som å si window.onload = onload1;

addEventHandler(window, "load", onload2);
// Du kan ikke si window.onload = onload2; da det vil overskrive onload1.. 
// Haraldsons funksjon vil fungere, men addEventListener og attachEvent 
// er bygget inn i browsere og fungerer på alle elementer og event typer.
// Både onload1 og 2 vil nå bli kalt på på onload.


addEventHandler(document.getElementById("dinDiv1"), "click", eventKlikkLytter1);
addEventHandler(document.getElementById("dinDiv1"), "click", eventKlikkLytter2);
// Samme prinsipp på disse, eventKlikkLytter1 og 2 blir kalt på når et klikk blir gjort inne i dinDiv1.

Endret av luxus
Lenke til kommentar
luxus

luxus

Skrevet
Skrevet (endret)

Jeg så forresten litt på koden din, og du har feil da du gjør dette:

addLoadEvent(initARC('makeMeAPrettyForm','radioOn','radioOff','checkboxOn','checkboxOff'));

 

addLoadEvent-funksjonen forventer å få inn en funksjon den kan kalle på. Det du gjør er å sende inn return-verdien av initARC().. Det du heller må gjøre er dette: 

addLoadEvent(
 function() {
initARC('makeMeAPrettyForm','radioOn','radioOff','checkboxOn','checkboxOff');
 }
);

Her sender vi inn en navnløs funksjon som kan bli kalt på, og den igjen kaller på funksjonen initARC.

Endret av luxus
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...