Javascript altijd uitvoeren bij laden pagina

maandag 8 oktober 2012 17:01

Acties:

0 Henk 'm!

Topicstarter

Ik ben op zoek naar een manier om bij het laden van een pagina een javascript uit te voeren. Echter wil ik dat het script altijd werlt, onafhankelijk van eventuele javascript definities binnen de html van de pagina.

Momenteel heb ik de volgende code :

HTML:

<head>
<script type="text/javascript" src="script.js">
</head>
<body onload="window.scrollTo(1240,0)"> 
...........
</body>

JavaScript:

window.onload=Init;

function Init() {
Do stuff
}

Hoe pas ik het javascript aan, zodat Init altijd uitgevoerd word als de pagina geladen word?
De onload="window.scrollTo(1240,0)" uit de HTML halen is helaas geen optie.

Lost In Music

maandag 8 oktober 2012 17:06

Acties:

0 Henk 'm!

jurgenr7

Window.scrollTo opnemen in je init functie?

maandag 8 oktober 2012 17:10

Acties:

0 Henk 'm!

Huismus

jQuery heeft $(document).ready(function () { });, daar zou je opzich je Init functie in kunnen zetten, maar als je geen jQuery gebruikt heb je wel weer een extra library nodig (overhead).

Ik zou niet weten hoe je die functie na kunt maken zonder jQuery.
Misschien dat je hier iets aan hebt: http://dustindiaz.com/smallest-domready-ever

maandag 8 oktober 2012 17:10

Acties:

0 Henk 'm!

Sgrovert

Topicstarter

Dat gaat helaas niet. Window.scrollTo is onderdeel van de Template. Als er een andere template gekozen word, moet deze code niet uitgevoerd worden

Lost In Music

maandag 8 oktober 2012 17:15

Acties:

0 Henk 'm!

Gamebuster

HTML:

<script>
(function() {
  var otherOnload = window.onload;
  window.onload = function() {
    otherOnload && otherOnload();
    window.Init && Init();
  };
})();
</script>

Dit hier voert de bestaande onload uit -indien aanwezig-, en daarna de Init functie. Je kan dit stukje script overal in je pagina kwijt, zowel in de body als in de head, of gewoon in een javascript file die geinclude wordt in de head.

Alleen ik zou toch even achter je oren gaan krabben of dit allemaal wel ethisch correct bezig bent. Ik mag hopen dat je bezig bent met een quickfix in een of andere verloren applicatie die volgend jaar vernietigd gaat worden.

[ Voor 93% gewijzigd door Gamebuster op 08-10-2012 17:19 ]

Let op: Mijn post bevat meningen, aannames of onwaarheden

maandag 8 oktober 2012 17:20

Acties:

0 Henk 'm!

Huismus

@Gamebuster,

code:

1	document.addEventListener

werkt alleen in moderne browsers (Opera 7+, Firefox, Konqueror 3.0+, Safari, Chrome en Internet Explorer 9+)

maandag 8 oktober 2012 17:22

Acties:

0 Henk 'm!

RM-rf

1 2 3 4 5 7 6 8 9

Sgrovert schreef op maandag 08 oktober 2012 @ 17:01:
Ik ben op zoek naar een manier om bij het laden van een pagina een javascript uit te voeren. Echter wil ik dat het script altijd werlt, onafhankelijk van eventuele javascript definities binnen de html van de pagina.

je javascript _is_ zelf ok javascript en dus moet je het ook zo oplossen...
het is verkeerd om net te doen alsof jouw javascript opeens geen javascript is en het dan op een heéél andere manir te willen oplossen... de reden dat dat zo slecht is, is voroal dat het een onoverzichtelijke en slecht te onderhouden scripting zal geven..

veel frameworks, zoals idd jQuery geven de mogelijkheid om bepaalde events in een 'document.onready' te laten plaatsvinden:
enkele voordelen daarvan is dat dit gebeurt als de DOM geinitialiseerd is, maar nog voordat alle afbeeldingen geladen zijn (onload dus, die soms véél later plaatsvind dan de document.onReady)..
maar ook kun je hier veel events en methods naast elkaar definieren zonder dat deze elkaar 'overschrijven wat dus bij een code als:
[code]
function initFunctie() {
// blah
}
window.onload = initFunctie[/i] wél kan gebeuren...

als je bv het initieren van bepaalde handelingen, eventueel een scriollfunctie die énkel moet plaatsvinden bij een bepaalde template en template-afhankelijk moet zijn, zou ik ervoor kiezen je BODY een classnaam te geven, bv :

code:

1	<body class="Scrolltemplate">

en dan de functie enkel te laten plaatsvinden als die class bestaat:

code:

1
2
3

jQuery(document).ready(function($) {
   $("body.Scrolltemplate").scrollTo( blah );
}

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

maandag 8 oktober 2012 18:45

Acties:

0 Henk 'm!

Sgrovert

Topicstarter

Ik ben een klein stukje verder met het definiëren van het probleem.

Momenteel heb ik getest in Chrome en IE. Het lijkt erop dat de "onload" definitie in de body in beide browsers de onload definities in losse javascript files "overschrijft". Op het moment dat de body een onload meekrijgt worden onload definities in de losse files niet uitgevoerd.

Bij het maken van 2 verschillende .js files veranderd de situatie.

scriptOud.js:

JavaScript:

window.onload=Init; 

function Init() { 
Do stuff 
}

scriptScroll.js

JavaScript:

window.onload=Scroll; 

function Scroll() { 
window.scrollTo(1240,0);
}

HTML:

<head>
<script type="text/javascript" src="scriptScroll.js"> 
<script type="text/javascript" src="scriptOud.js"> 
</head> 
<body>  
........... 
</body>

IE voert alles uit. Zowel het scroll script, alsook het "oude" script. Meerdere onload events worden dus na elkaar uitgevoerd
Chrome voert alleen het laatste script in de script lijst uit. window.onload word dus overschreven.

Om het in beide browsers werkend te krijgen is de code van Gamebuster een mogelijkheid.

Scriptoud.js:

JavaScript:

var otherOnload = window.onload; 
  window.onload = function() { 
    otherOnload && otherOnload(); 
    window.Init && Init(); 
  };

function Init() {
Do stuff 
}

Echter ben ik het met het eens dat dit niet bepaald een elegante oplossing is.

Nog even een klein beetje achtergrond waar ik mee bezig ben.
Ik ben bezig met een website waarvoor verschillende templates komen. Voor het ontwerp van de template wil ik zo veel mogelijk vrijheid houden. Echter is het niet de bedoeling dat er voor elke nieuwe template wijzigingen in het achterliggende systeem gedaan moeten worden.
De "do stuff" code plaatst o.a. text in een text_area en start een paar mouse events. Zolang het echter mogelijk is om code in de template te plaatsen welke deze functionaliteit "uitschakeld", heb ik geen goede applicatie.

Lost In Music

Onderwerpen