Hoe een functie uitvoeren wanneer de pagina is geladen?

Ik wil een functie uitvoeren wanneer de pagina is geladen, maar ik wil deze niet gebruiken in de <body>-tag.

Ik heb een script dat wordt uitgevoerd als ik het initialiseer in de <body>, zoals dit:

function codeAddress() {
  // code
}
<body onLoad="codeAddress()">

Maar ik wil het uitvoeren zonder de <body onload="codeAddress()">en ik heb veel dingen geprobeerd, b.v. dit:

window.onload = codeAddress;

Maar het werkt niet.

Dus hoe voer ik het uit als de pagina is geladen?


Antwoord 1, autoriteit 100%

window.onload = codeAddress;zou moeten werken – hier is een demoen de volledige code:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function codeAddress() {
            alert('ok');
        }
        window.onload = codeAddress;
        </script>
    </head>
    <body>
    </body>
</html>

Antwoord 2, autoriteit 52%

In plaats van jQuery of window.onload te gebruiken, heeft native JavaScript een aantal geweldige functies overgenomen sinds de release van jQuery. Alle moderne browsers hebben nu hun eigen DOM-ready-functie zonder het gebruik van een jQuery-bibliotheek.

Ik zou dit aanraden als je native Javascript gebruikt.

document.addEventListener('DOMContentLoaded', function() {
    alert("Ready!");
}, false);

Antwoord 3, autoriteit 12%

Neem het antwoord van Darin, maar in jQuery-stijl. (Ik weet dat de gebruiker om javascript heeft gevraagd).

lopende viool

$(document).ready ( function(){
   alert('ok');
});​

Antwoord 4, autoriteit 11%

Alternatieve oplossing. Ik geef hier de voorkeur aan vanwege de beknoptheid en de eenvoud van de code.

(function () {
    alert("I am here");
})();

Dit is een anonieme functie, waarbij de naam niet is opgegeven.
Wat hier gebeurt, is dat de functie samen wordt gedefinieerd en uitgevoerd.
Voeg dit toe aan het begin of einde van de body, afhankelijk van of het moet worden uitgevoerd voordat de pagina wordt geladen of kort nadat alle HTML-elementen zijn geladen.


Antwoord 5, autoriteit 4%

window.onload = function() {… etc. is geen goed antwoord.

Dit zal waarschijnlijk werken, maar het verbreekt ook alle andere functies die al aan die gebeurtenis vasthaken. Of, als een andere functie na die van jou inhaakt op die gebeurtenis, zal deze de jouwe breken.
U kunt dus later vele uren besteden om erachter te komen waarom iets dat werkte niet meer werkt.

Een krachtiger antwoord hier:

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}

Sommige code die ik heb gebruikt, ben ik vergeten waar ik die heb gevonden om de auteur de eer te geven.

function my_function() {
    // whatever code I want to run after page load
}
if (window.attachEvent) {window.attachEvent('onload', my_function);}
else if (window.addEventListener) {window.addEventListener('load', my_function, false);}
else {document.addEventListener('load', my_function, false);}

Hopelijk helpt dit 🙂


Antwoord 6

Probeer readystatechange

document.addEventListener('readystatechange', () => {    
  if (document.readyState == 'complete') codeAddress();
});

waar de staten zijn:

  • bezig met laden– het document wordt geladen (niet geactiveerd in fragment)
  • interactief– het document wordt geparseerd, geactiveerd voordat DOMContentLoaded
  • voltooid– het document en de bronnen worden geladen, geactiveerd vóór window.onload

Antwoord 7

Bekijk het domReady-scriptwaarmee meerdere functies kunnen worden ingesteld wanneer de DOM geladen. Het is eigenlijk wat de Dom ready doet in veel populaire JavaScript-bibliotheken, maar het is lichtgewicht en kan worden genomen en toegevoegd aan het begin van je externe scriptbestand.

Voorbeeld gebruik

// add reference to domReady script or place 
// contents of script before here
function codeAddress() {
}
domReady(codeAddress);

Antwoord 8

Zodra de pagina is geladen, wordt de functie uitgevoerd:

(*your function goes here*)(); 

Alternatief:

document.onload = functionName();
window.onload = functionName(); 

Antwoord 9

window.onload werkt als volgt:

function codeAddress() {
	document.getElementById("test").innerHTML=Date();
}
window.onload = codeAddress;
<!DOCTYPE html>
<html>
<head>
	<title>learning java script</title>
	<script src="custom.js"></script>
</head>
<body>
	<p id="test"></p>
	<li>abcd</li>
</body>
</html>

Antwoord 10

Ik geloof dat dit de beste manier is om ondersteuning te behouden voor verschillende browserversies

if (window.addEventListener) {
   window.addEventListener("load", myFunction, false);
}
else if (window.attachEvent) {
   window.attachEvent("onload", myFunction);
}
else {
   window.onload = myFunction; //will override previously attached event listeners.
}

Other episodes