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?

javascript html onload

— 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

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>

Erweitern Sie das Snippet

<!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>

Erweitern Sie das Snippet

— 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

Code-Snippet anzeigen

<script>
  document.addEventListener("DOMContentLoaded", () => {
    mydiv.innerHTML += `DOMContentLoaded (timestamp: ${Date.now()})</br>`;
  });
  
  window.onload = () => {
    mydiv.innerHTML += `window.onload (timestamp: ${Date.now()}) </br>` ;
  } ;

  document.addEventListener('readystatechange', () => {
    mydiv.innerHTML += `ReadyState: ${document.readyState}  (timestamp: ${Date.now()})</br>`;
    
    if (document.readyState == 'complete') codeAddress();
  });

  function codeAddress() {
    mydiv.style.color = 'red';
  }
</script>

<div id='mydiv'></div>

Erweitern Sie das Snippet

— 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>

Erweitern Sie das Snippet

— Rudra
quelle