it-swarm.com.de

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

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

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

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

Ich möchte es jedoch ohne <body onLoad="codeAddress()"> ausführen und habe viele Dinge ausprobiert, z. diese:

window.onload = codeAddress;

Aber es funktioniert nicht.

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

192

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>

310
Darin Dimitrov

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

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

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

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

Geige laufen

$(document).ready ( function(){
   alert('ok');
});​
36
Eat at Joes

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

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

Hierbei handelt es sich um 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 diese an den Anfang oder das Ende des Texts an, je nachdem, ob sie es ist ausgeführt werden, bevor die Seite geladen wird oder kurz nachdem alle HTML-Elemente geladen wurden.

14
Habeeb

window.onload = function() { ... etc. ist keine großartige Antwort. 

Dies wird wahrscheinlich funktionieren, aber es werden auch alle anderen Funktionen zerstört, die bereits an diesem Ereignis hängen. Wenn sich nach diesem Ereignis eine andere Funktion in dieses Ereignis einfügt, wird das Ihre zerstört. Also, Sie können viele Stunden später damit verbringen, herauszufinden, warum etwas, das funktioniert, 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;
    }
}

Ein Teil des Codes, den ich verwendet habe, vergesse ich, wo ich den Autor gefunden habe.

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 :)

7
Will

Schauen Sie sich das domReady-Skript an, das die Einrichtung mehrerer Funktionen ermöglicht, die ausgeführt werden, wenn das DOM geladen ist. Es ist im Grunde das, was der Dom ready in vielen gängigen JavaScript-Bibliotheken tut, ist aber leicht und kann am Anfang Ihrer externen Skriptdatei mitgenommen und hinzugefügt werden.

Verwendungsbeispiel 

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

function codeAddress() {

}

domReady(codeAddress);
3
Russ Cam

Versuchen Sie readystatechange

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

wo Staaten sind:

  • loading - das Dokument wird geladen (kein Snippet ausgelöst)
  • interaktiv - das Dokument wird analysiert und vor DOMContentLoaded ausgelöst
  • complete - das Dokument und die Ressourcen werden geladen und vor window.onload abgefeuert
<script>
  document.addEventListener("DOMContentLoaded", () => {
    mydiv.innerHTML += 'DOMContentLoaded' + '</br>';
  });
  
  window.onload = () => {
    mydiv.innerHTML += 'window.onload' + '</br>';
  } ;

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

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

<div id='mydiv'></div>
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>

0
Rudra