Wie rufe ich beim Laden einer Seite eine JavaScript-Funktion auf?

244

Um eine JavaScript-Funktion nach dem Laden der Seite aufzurufen, fügen Sie dem Text onload, der ein bisschen JavaScript enthält, normalerweise ein Attribut hinzu (normalerweise wird nur eine Funktion aufgerufen ).

<body onload="foo()">

Wenn die Seite geladen wurde, möchte ich JavaScript-Code ausführen, um Teile der Seite dynamisch mit Daten vom Server zu füllen. Ich kann das onloadAttribut nicht verwenden , da ich JSP-Fragmente verwende, die kein bodyElement haben, dem ich ein Attribut hinzufügen kann.

Gibt es eine andere Möglichkeit, eine JavaScript-Funktion beim Laden aufzurufen? Ich würde jQuery lieber nicht verwenden, da ich damit nicht sehr vertraut bin.

javascript onload

— palAlaa
quelle

15

Übrigens: Es ist Javascript. Java ist eine Sprache und Javascript eine andere. Es gibt kein Java-Skript. Zu Ihrer Information

— Yanick Rochon

Können Sie entweder überprüfen, ob Kevins Bearbeitung Ihrer Frage immer noch dieselbe Frage stellt, oder sie umformulieren, um sicherzustellen, dass wir sie verstehen? (Versuchen Sie, eine Alternative zum Onload zu finden?)

— STW

388

Wenn die Onload-Methode Parameter annehmen soll, können Sie Folgendes tun:

window.onload = function() {
  yourFunction(param1, param2);
};

Dadurch wird Onload an eine anonyme Funktion gebunden, die beim Aufrufen die gewünschte Funktion mit den von Ihnen angegebenen Parametern ausführt. Natürlich können Sie innerhalb der anonymen Funktion mehrere Funktionen ausführen.

— Matt Sieker
quelle

Und jetzt, wenn ich dynamisch eine vom Server generierte Seite einbinde und DOM-Bereitschaft benötige, muss ich dieses Minenfeld durcharbeiten. Wenn nur jemand den Bibliotheksbenutzer früher richtig ermutigt hätte.

— Stefan Kendall

4

Ich habe nicht gesagt, dass es eine gute Idee ist. Obwohl der leitende Entwickler, in dem ich arbeite, einen starken Fall des Not Invented Here-Syndroms hat und ich ihn nicht überzeugen konnte, außerhalb einiger Seiten jquery zu verwenden.

— Matt Sieker

2

Dann sollten Sie vielleicht den Job wechseln. Wenn das richtige Werkzeug für den Job nicht das Werkzeug ist, das Sie verwenden, warum schlagen Sie Ihren Kopf gegen die Wand und kämpfen ständig gegen die Inkompetenten?

— Stefan Kendall

Und kann ich dieselbe Funktion zum zweiten Mal über die Schaltfläche onclick event on aufrufen?

— Faizan

73

Eine andere Möglichkeit, dies zu tun, ist die Verwendung von Ereignis-Listenern. So verwenden Sie sie:

document.addEventListener("DOMContentLoaded", function() {
  you_function(...);
});

Erläuterung:

DOMContentLoaded Dies bedeutet, wenn die DOM-Objekte des Dokuments vollständig geladen und von JavaScript angezeigt werden, könnte dies auch "Klicken", "Fokussieren" gewesen sein ...

function () Anonyme Funktion wird beim Eintreten des Ereignisses aufgerufen.

— Ahmed Jolani
quelle

5

Beachten Sie, dass dies in IE 8 und niedriger nicht funktioniert. Ansonsten ist dies die beste reine JS-Lösung!

— Philipp

46

Ihre ursprüngliche Frage war unklar, vorausgesetzt, Kevins Bearbeitung / Interpretation ist korrekt, dann gilt diese erste Option nicht

Die typischen Optionen verwenden das onloadEreignis:

<body onload="javascript:SomeFunction()">
....

Sie können Ihr Javascript auch ganz am Ende des Körpers platzieren. Die Ausführung wird erst gestartet, wenn das Dokument vollständig ist.

<body>
  ...
  <script type="text/javascript">
    SomeFunction();
  </script>
</body>

Eine weitere Möglichkeit besteht darin, die Verwendung eines JS-Frameworks in Betracht zu ziehen, das dies an sich tut:

// jQuery
$(document).ready( function () {
  SomeFunction();
});

— STW
quelle

Die javascript:in der onloadist nicht notwendig, wenn auch nicht schädlich.

— icktoofay

@ STW <script type="text/javascript">LoadResult();</script>gibtUncaught ReferenceError: LoadResult is not defined

— Gunasegar

37

function yourfunction() { /* do stuff on page load */ }

window.onload = yourfunction;

Oder mit jQuery, wenn Sie möchten:

$(function(){
   yourfunction();
});

Wenn Sie beim Laden von Seiten mehr als eine Funktion aufrufen möchten, lesen Sie diesen Artikel, um weitere Informationen zu erhalten:

Verwenden mehrerer JavaScript-Onload-Funktionen

— Sarfraz
quelle

3

Dies ist nicht korrekt. Die Funktion wird ausgeführt und weist alles zu, was sie dem Onload zurückgibt. Das () sollte nicht da sein.

— Epascarello

1

Wenn andere Funktionen auf das Onload-Ereignis warten, werden sie umgehauen. Es ist besser, einen Ereignis-Listener hinzuzufügen, als einen Ereignishandler direkt zuzuweisen. Selbst in diesem Fall würden Sie es als "window.onload = yourfunction" ohne den Funktionsabschluss zuweisen, nicht so, wie Sie es haben. Ihr Weg versucht, Ihre Funktion () zum Zeitpunkt der Zuweisung auszuführen.

— Robusto

Dadurch wird window.onload der Rückgabewert der Funktion zugewiesen, was nur funktioniert, wenn der Rückgabewert eine Funktion ist.

— I.devries

@epascarello: Guter Fang, behoben, Sie sehen eine Gewohnheit beim Schreiben von Funktionsnamen. Danke

— Sarfraz

1

window.onload = Ihre Funktion; Das Problem auf diese Weise ist, dass es keinen Funktionsparameter akzeptiert !!

— PalAlaa

8

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

— anonym
quelle

3

Ich denke, seine Antwort ist klar, wie Sie sehen können, wird das Skript in das Head-Tag eingefügt, sodass es vor dem Inhalt des Körpers ausgeführt werden kann. Oder sagen wir, laden Sie seine Funktionen vor oder was auch immer. Manchmal stellt eine Person Fragen, weil sie es nicht tut. Ich weiß es überhaupt nicht, aber es ist nie der Fall, dass jemand Sie mit einem Löffel füttert oder jemand in dieser Community. Sie müssen selbst ein bisschen mehr nachschlagen. # besonders_das_you're_a_web_developer

— M03

8

Sie müssen die Funktion aufrufen, die beim Laden aufgerufen werden soll (dh Laden des Dokuments / der Seite). Die Funktion, die Sie beim Laden von Dokumenten oder Seiten laden möchten, heißt beispielsweise "yourFunction". Dies kann durch Aufrufen der Funktion beim Laden des Dokuments erfolgen. Weitere Informationen finden Sie im folgenden Code.

Versuchen Sie den folgenden Code:

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        yourFunction();
    });
    function yourFunction(){
      //some code
    }
</script>

— Amir Md Amiruzzaman
quelle

6

Hier ist der Trick (funktioniert überall):

r(function(){
alert('DOM Ready!');
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

— Abhishek
quelle

1

Verwenden Sie zum Erkennen geladener HTML- MutationObserverDateien (vom Server), die in das DOM eingefügt wurden, oder zum Erkennen des Moments in Ihrer loadContent-Funktion, wenn Daten zur Verwendung bereit sind

Code-Snippet anzeigen

let ignoreFirstChange = 0;
let observer = (new MutationObserver((m, ob)=>
{
  if(ignoreFirstChange++ > 0) console.log('Element added on', new Date());
}
)).observe(content, {childList: true, subtree:true });


// TEST: simulate element loading
let tmp=1;
function loadContent(name) {  
  setTimeout(()=>{
    console.log(`Element ${name} loaded`)
    content.innerHTML += `<div>My name is ${name}</div>`; 
  },1500*tmp++)
}; 

loadContent('Senna');
loadContent('Anna');
loadContent('John');

<div id="content"><div>

Erweitern Sie das Snippet

— Kamil Kiełczewski
quelle