Wie führe ich eine Funktion aus, wenn die Seite geladen wird?

246

Ich möchte eine Funktion ausführen, wenn die Seite geladen wird, aber ich möchte sie nicht im <body>Tag verwenden.

Ich habe ein Skript, das ausgeführt wird, wenn ich es <body>wie folgt initialisiere :

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

Aber ich möchte es ohne das ausführen <body onload="codeAddress()">und habe viele Dinge ausprobiert, z. B.:

window.onload = codeAddress;

Aber es funktioniert nicht.

Wie führe ich es aus, wenn die Seite geladen wird?

Claes Gustavsson
quelle
Laufen Sie window.onload = codeAddressnach codeAddress()definiert? Wenn ja, sollte dies funktionieren. Sind Sie sicher, dass anderswo kein Fehler vorliegt?
Skilldrick
Das macht keinen Sinn. window.onload wird nach dem Laden der Seite ausgeführt und alles Javascript ist verfügbar, sodass die Funktion codeAddress () an einer beliebigen Stelle innerhalb der Seite oder in verknüpften js-Dateien deklariert werden kann. Es muss nicht vorher kommen, es sei denn, es wurde während des Ladens der Seite selbst aufgerufen.
Jared Farrish
@ Jared Ja, das tut es. Schauen Sie sich jsfiddle.net/HZHmc an . Es funktioniert nicht. Wenn Sie die Datei window.onload jedoch nach der Definition verschieben: jsfiddle.net/HZHmc/1 , funktioniert dies.
Skilldrick
Eine Funktionsdeklaration wird im Allgemeinen an die Spitze des Bereichs angehoben, sodass die Funktion an einer beliebigen Stelle in einem zugänglichen Bereich deklariert werden kann.
Russ Cam
4
Alle gängigen Browser können Javascript-Fehler anzeigen - erhalten Sie welche?
Christoph

Antworten:

354

window.onload = codeAddress;sollte funktionieren - hier ist eine Demo und der vollständige 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>


<!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');
        }
        
        </script>
    </head>
    <body onload="codeAddress();">
    
    </body>
</html>

Darin Dimitrov
quelle
3
Wie ich in meiner Antwort sagte, ist nichts falsch an dem Code - der Grund, warum er nicht funktioniert, muss irgendwo ein Fehler in der JS sein.
Skilldrick
Wenn Sie einen Absatz mit Text in den Text einfügen, wird dieser erst geladen, wenn Sie auf OK klicken.
FluorescentGreen5
Dieser globale Ereignishandler ist nur in Chrome verfügbar. developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/…
Devappended
177

Anstatt jQuery oder window.onload zu verwenden, hat natives JavaScript seit der Veröffentlichung von jQuery einige großartige Funktionen übernommen. Alle modernen Browser verfügen jetzt über eine eigene DOM-fähige Funktion ohne Verwendung einer jQuery-Bibliothek.

Ich würde dies empfehlen, wenn Sie natives Javascript verwenden.

document.addEventListener('DOMContentLoaded', function() {
    alert("Ready!");
}, false);
Spencer May
quelle
4
(Noob Frage: Was macht das false?)
11.
7
@ ᔕᖺᘎᕊ für die Eigenschaft 'bubbles' (die Sie nicht einschließen müssen, ich fülle nur alle Booleschen Werte aus guten Gründen aus). Es gibt auch eine andere boolesche Anweisung für die Eigenschaft 'cancelable', die jedoch nicht sehr nützlich ist, da die obige Anweisung bereits nicht stornierbar ist. Lesen Sie hier mehr darüber: developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
Spencer
1
Dies ist, wonach ich gerade gesucht habe :) Wird ausgeführt, wenn das DOM fertig ist, sodass Sie es bearbeiten können, nicht wenn der Browser "Seite vollständig geladen" anzeigt, was aufgrund externer Inhalte (z. B. Anzeigen) einige Sekunden dauern kann.
Nathanyel
Etwas noob Frage, was ist, wenn Sie nicht wissen, ob die Seite geladen ist oder nicht? Bearbeiten: Ah: document.readyState
Brian Hannay
1
@ x-yuri "Das DOMContentLoaded-Ereignis wird ausgelöst, wenn das Dokument vollständig geladen und analysiert wurde, ohne darauf zu warten, dass Stylesheets, Bilder und Unterrahmen vollständig geladen sind (das Ladeereignis kann zum Erkennen einer vollständig geladenen Seite verwendet werden)." - stackoverflow.com/questions/2414750/…
Spencer
46

Darins Antwort, aber jQuery-Stil. (Ich weiß, dass der Benutzer nach Javascript gefragt hat).

Geige laufen

$(document).ready ( function(){
   alert('ok');
});​
Iss bei Joes
quelle
4
Ihre Antwort hat mich gelehrt, aber nicht über jQuery / Javascript.
Einhorn2
2
@ VijayKumar Dies ist jQuery, nicht natives Javascript, daher benötigen Sie eine jQuery-Bibliothek, damit es funktioniert
Spencer
30

Alternative Lösung. Ich bevorzuge dies aus Gründen der Kürze und der Einfachheit des Codes.

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

Dies ist eine anonyme Funktion, bei der der Name nicht angegeben ist. Was hier passiert ist, dass die Funktion zusammen definiert und ausgeführt wird. Fügen Sie dies am Anfang oder Ende des Körpers hinzu, je nachdem, ob es vor dem Laden der Seite oder kurz nach dem Laden aller HTML-Elemente ausgeführt werden soll.

Habeeb
quelle
1
Dies ist der einzige Code, der mit der HTML-Vorschau für GitHub funktioniert : htmlpreview.github.io Anderer Code ist zwar korrekt, wird jedoch durch diese HTML-Vorschau zerstört.
Jason Doucette
1
Kann jemand erklären, wie sich dies von der Platzierung der Skript-Tags am Ende der HTML-Seite und dem Zweck der anonymen Funktion unterscheidet?
Pat-Laugh
10

window.onload = function() { ... etc. ist keine gute Antwort.

Dies wird wahrscheinlich funktionieren, aber es werden auch alle anderen Funktionen unterbrochen, die bereits mit diesem Ereignis verbunden sind. Wenn sich eine andere Funktion nach Ihrer in dieses Ereignis einfügt, wird Ihre Funktion unterbrochen. Sie können also viele Stunden später versuchen herauszufinden, warum etwas, das funktioniert hat, nicht mehr funktioniert.

Eine robustere Antwort 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;
    }
}

Bei einem Code, den ich verwendet habe, habe ich vergessen, wo ich ihn gefunden habe, um dem Autor die Ehre zu erweisen.

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);}

Hoffe das hilft :)

Wille
quelle
onload
Vielen
4

Versuchen Sie es mit readystatechange

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

wo Staaten sind:

  • Laden - das Dokument wird geladen (kein Snippet ausgelöst)
  • interaktiv - das Dokument wird analysiert und zuvor ausgelöstDOMContentLoaded
  • abgeschlossen - Das Dokument und die Ressourcen werden geladen und zuvor ausgelöstwindow.onload

Kamil Kiełczewski
quelle
3

Schauen Sie sich das domReady-Skript an , mit dem mehrere Funktionen eingerichtet werden können, die ausgeführt werden, wenn das DOM geladen wurde. Es ist im Grunde das, was der Dom bereit in vielen gängigen JavaScript-Bibliotheken macht, ist aber leichtgewichtig und kann am Anfang Ihrer externen Skriptdatei übernommen und hinzugefügt werden.

Anwendungsbeispiel

// add reference to domReady script or place 
// contents of script before here

function codeAddress() {

}

domReady(codeAddress);
Russ Cam
quelle
0

window.onload funktioniert folgendermaßen:

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>

Rudra
quelle