Wo ist der beste Ort, um ein JavaScript-Snippet zu platzieren, um das DOM einer Seite zu ändern, bevor es rendert

Ich habe ein paar dynamische Seiten und ich möchte bestimmte Elemente ändern, bevor die Seite vollständig gerendert hat.Wo ist der beste Ort, um ein JavaScript-Snippet zu platzieren, um das DOM einer Seite zu ändern, bevor es rendert

Mein Schnipsel ist so etwas wie

document.body.getElementById("change").innerHTML = "<img src...";

Ich habe keinen Zugriff auf die Content-Server-Seite zu ändern.

Wo ist der beste Ort, um das Snippet so zu platzieren, dass der Code vor der gerenderten Seite ausgeführt wird?

Stattdessen ist das JavaScript in den Kopf (innerhalb des window.onload-Ereignisses?) Oder vor dem schließenden BODY (nicht in einem Ereignis-Listener) optimal?

Quelle

2010-04-28 markmarkoh

AFAIK können Sie das nicht tun. Denn bevor eine Seite gerendert wird, gibt es kein Element und Sie können nicht auf Elemente zugreifen, die nicht in den DOM-Baum geladen wurden.

Quelle

2010-04-28 10:06:06 rahul

Ich fürchte, es ist sehr unwahrscheinlich, dass Sie Ihr Skript ausführen können, bevor die Seite gerendert wird. Sicher, Sie können ein Inline-Skript platzieren und es document.write (...) an der Stelle verwenden, an der es Ihren Inhalt anzeigen soll, aber das ist eine schreckliche Lösung. Ansonsten ist das "DOM Ready" -Ereignis das Beste, was Sie tun können, obwohl es auf allen Browsern schwierig ist, konsistent zu sein, benötigen Sie wirklich eine Bibliothek, um die Details zu abstrahieren. jQuery bietet die bereit Methode zum Auslösen eines Ereignisses, wenn das DOM bereit ist, anstatt wann die Seite und alle Ressourcen geladen werden.

Quelle

2010-04-28 10:08:14 Geoff

Da der Browser in der Regel Elemente macht sofort, nachdem sie der beste Weg, um den Code in einem script Element direkt nach dem referenzierte Element tun Platz wäre analysiert wurden:

<div id="change"></div> 
<script type="text/javascript"> 
    document.body.getElementById("change").innerHTML = "<img src..."; 
</script>

Quelle

2010-04-28 10:14:29 RoToRa

nicht sicher, ob ich verstehe Ihr Problem richtig, Wenn Sie jedoch einen Ereignis-Listener im Kopf verwenden (z. B. $(document).ready() von jQuery), können Sie das Element nach dem Laden der dom-Struktur ändern, indem Sie Ihr Snippet an die beim Auslösen des Ereignisses aufgerufene Funktion (handler) übergeben.

<HEAD> 
    //... 
    <SCRIPT type="text/javascript"> 

     $(document).ready(function() { 
      $("#change").append(
       $("<img src=\"...\">") 
      ) ; 
     }) ; 

    <SCRIPT> 

</HEAD>

Mit Kern javascript Sie Ihre Event-Listener für mozilla blechen müssen (W3C) und Internet Explorer Ereignis Spezifikationen. Es gibt eine Menge Dokumentation darüber, wie man das im Internet macht.

In beiden Fällen ist es natürlich am besten, den Inhalt selbst zu erstellen, ohne ihn nach dem Rendern zu verändern.

Quelle

2010-04-28 11:29:03 FK82

Wenn Sie keine Elemente rendern möchten, bevor Sie die DOM-Änderungen vornehmen, können Sie CSS für das body-Element festlegen und es dann in display: block ändern, sobald Sie fertig sind.

Quelle

2017-05-15 08:05:52

Wo ist der beste Ort, um ein JavaScript-Snippet zu platzieren, um das DOM einer Seite zu ändern, bevor es rendert

Antwort

Verwandte Themen