Function ausführen wenn der Body geladen ist

Stef · 14. Februar 2018

Hey,

ich möchte eine Function ausführen, wenn der Body geladen ist. Habe auch schon gegoogelt. Habe auch hilfreiches gefunden, aber entweder funktioniert dies nicht oder die machen es so wie ich es nicht machen möchte.

Ich habe bereits die Methode mit dem EventListener in Verbindung mit dem Event load ausprobiert. Ebenso auch mit der Methode, das JS-Attribut onload in den body-tag zu schreiben.

Wenn ich dies mit dem EventListener mache funktioniert nichts. Wenn ich es mit der zweiten Methode versuche, welche ich eigentlich nicht verwenden möchte, funktioniert es.

Warum ist das denn so?

HTML:

HTML

<section>
            <article>
                <p id="test"></p>
            </article>
        </section>

Code zu Methode 1:

JavaScript

window.onload = function(){
    
    var body = document.getElementsByTagName("body")[0];

    body.addEventListener('load', function(){
        document.getElementById("test").innerText = "Yes. Onload Function started";
    });
    


}

Alles anzeigen

Code zu Methode 2:

Code

<body onload="myFunc()">

function myFunc(){
    document.getElementById("test").innerText = "Yes. Onload Function started";
}

Stef

Sempervivum · 14. Februar 2018

Die Methode 1 funktioniert deshalb nicht, weil Du dich zwei Mal auf das load-Event beziehst. Wenn Du mit body.addEventListener('load', function(){den Listener registriert, hat dieses Event schon gefeuert und feuert nicht wieder.

Also entweder so:

https://jsfiddle.net/Sempervivum/7xzavaLw/1/

oder so:

https://jsfiddle.net/Sempervivum/8p1g6kx9/5/

Gleiches Problem im Fiddle: Lässt man Loadtype auf onLoad funktioniert es ebenfalls nicht.

Stef · 15. Februar 2018

Hey,

achso ok. Stimmt ja. Mit window.onload = function(){} wartet man bis der ganze Content geladen ist. Danke.

Ich habe mir dazu gestern Abend noch Gedanken gemacht und habe es nun so geschaft:

JavaScript

window.onload = function(){
    
    var body = document.getElementsByTagName("body");
    
    function sayHello(){
        document.getElementById("test").innerText = "Hello Guys...";
    }

    if (body) {
        sayHello();
    }
    
    
}

Alles anzeigen

Function ausführen wenn der Body geladen ist

Jetzt mitmachen!

Teilen