webentwicklung-frage-antwort-db.com.de

Was sind Alternativen zu document.write?

In Tutorials habe ich gelernt, document.write zu verwenden. Jetzt verstehe ich, dass dies vielen missbilligt wird. Ich habe print() ausprobiert, aber dann wird es buchstäblich an den Drucker gesendet.

Welche Alternativen sollte ich verwenden und warum sollte ich nicht document.write verwenden? W3schools und MDN verwenden document.write.

58
DarkLightA

Als empfohlene Alternative zu document.write können Sie DOM-Manipulation verwenden, um Knotenelemente direkt abzufragen und dem DOM hinzuzufügen.

13
Darin Dimitrov

Der Grund dafür, dass Ihr HTML-Code ersetzt wird, ist auf eine schädliche JavaScript-Funktion zurückzuführen: document.write().

Es ist definitiv "schlechte Form". Es funktioniert nur mit Webseiten, wenn Sie es beim Laden der Seite verwenden. Wenn Sie es zur Laufzeit verwenden, wird es Ihr gesamtes Dokument durch die Eingabe ersetzen. Wenn Sie es als strikte XHTML-Struktur anwenden, ist es nicht einmal gültiger Code.


das Problem:

document.write schreibt in den Dokumentenstrom. Beim Aufruf von document.write in einem geschlossenen (oder geladenen) Dokument werden automatisch document.open aufgerufen, wodurch das Dokument gelöscht wird.

- Zitat aus dem MDN

document.write() hat zwei Gefolgsleute, document.open() und document.close() . Wenn das HTML-Dokument geladen wird, ist das Dokument "geöffnet". Wenn das Dokument vollständig geladen wurde, wurde das Dokument geschlossen. Wenn Sie an dieser Stelle document.write() verwenden, wird Ihr gesamtes (geschlossenes) HTML-Dokument gelöscht und durch ein neues (geöffnetes) Dokument ersetzt. Dies bedeutet, dass Ihre Webseite sich selbst gelöscht hat und mit dem Schreiben einer neuen Seite begonnen hat - von Grund auf.

Ich glaube document.write() bewirkt, dass der Browser ebenfalls einen Leistungsabfall hat (korrigieren Sie mich, wenn ich falsch liege).


ein Beispiel:

In diesem Beispiel wird die Ausgabe in das HTML-Dokument geschrieben, nachdem die Seite geladen wurde. Watch document.write() s böse Kräfte löschen das gesamte Dokument, wenn Sie auf die Schaltfläche "Vernichtung" klicken:

I am an ordinary HTML page.  I am innocent, and purely for informational purposes. Please do not <input type="button" onclick="document.write('This HTML page has been succesfully exterminated.')" value="exterminate"/>
me!


die Alternativen:

  • .innerHTML Dies ist eine wunderbare Alternative, aber dieses Attribut muss an das Element angehängt werden, an dem Sie den Text einfügen möchten. 

Beispiel: document.getElementById('output1').innerHTML = 'Some text!';

  • .createTextNode() ist die vom W3C empfohlene Alternative. 

Beispiel: var para = document.createElement('p'); para.appendChild(document.createTextNode('Hello, '));

HINWEIS: Es ist bekannt, dass die Leistung etwas abnimmt (langsamer als .innerHTML). Ich empfehle stattdessen .innerHTML.


das Beispiel mit der .innerHTML-Alternative:

I am an ordinary HTML page. 
I am innocent, and purely for informational purposes. 
Please do not 
<input type="button" onclick="document.getElementById('output1').innerHTML = 'There was an error exterminating this page. Please replace <code>.innerHTML</code> with <code>document.write()</code> to complete extermination.';" value="exterminate"/>
 me!
<p id="output1"></p>

65
God is good

Hier ist Code, der document.write direkt ersetzen sollte:

document.write=function(s){
    var scripts = document.getElementsByTagName('script');
    var lastScript = scripts[scripts.length-1];
    lastScript.insertAdjacentHTML("beforebegin", s);
}
21

Lassen Sie hier nur eine Notiz fallen, um zu sagen, dass die Verwendung von document.write aufgrund von Leistungsproblemen (synchrone DOM-Injektion und -Auswertung) zwar hoch verpönt ist, es aber auch Keine echte 1: 1-Alternative , wenn Sie document.write verwenden, um Skript-Tags bei Bedarf einzufügen.

Es gibt viele gute Möglichkeiten, dies zu vermeiden (z. B. Skriptlader wie RequireJS , die Ihre Abhängigkeitsketten verwalten), aber sie sind invasiver und werden daher am besten durchgehend verwendet die Website/Anwendung.

9
James M. Greene

Die Frage hängt davon ab, was Sie tatsächlich versuchen.

Anstelle von document.write können Sie someElement.innerHTML oder besser document.createElement mit einem someElement.appendChild verwenden.

Sie können auch die Verwendung einer Bibliothek wie jQuery und die darin enthaltenen Modifikationsfunktionen in Betracht ziehen: http://api.jquery.com/category/manipulation/

7
Wolph

Dies ist wahrscheinlich der richtige, direkte Ersatz: insertAdjacentHTML .

5

Versuchen Sie, getElementById () oder getElementsByName () zu verwenden, um auf ein bestimmtes Element zuzugreifen und anschließend die innerHTML-Eigenschaft zu verwenden:

<html>
    <body>
        <div id="myDiv1"></div>
        <div id="myDiv2"></div>
    </body>

    <script type="text/javascript">
        var myDiv1 = document.getElementById("myDiv1");
        var myDiv2 = document.getElementById("myDiv2");

        myDiv1.innerHTML = "<b>Content of 1st DIV</b>";
        myDiv2.innerHTML = "<i>Content of second DIV element</i>";
    </script>
</html>
3
user432219

Sie können die Methode insertAdjacentHTML und die Eigenschaft document.currentScript kombinieren.

Die insertAdjacentHTML() -Methode der Element-Schnittstelle analysiert den angegebenen Text als HTML oder XML und fügt die resultierenden Knoten an einer angegebenen Position in den DOM-Baum ein :

  • 'beforeebegin': Vor dem Element selbst.
  • 'afterbegin': Gerade innerhalb des Elements, vor seinem ersten Kind.
  • 'beforeend': Direkt im Element, nach seinem letzten Kind.
  • 'afterend': Nach dem Element selbst.

Die Eigenschaft Document.currentScript Gibt das Element <script> Zurück, dessen Skript gerade verarbeitet wird. Die beste Position ist vor dem Beginn - neues HTML wird vor <script> Selbst eingefügt.

<script>
  document.currentScript.insertAdjacentHTML(
    'beforebegin', 
    'this is the document.write alternative'
);
</script>
2
Sorin

Ich kann das Problem mit document.write nicht sehen. Wenn Sie es vor dem Auslösen des onload-Ereignisses verwenden, wie Sie vermutlich zum Beispiel zum Erstellen von Elementen aus strukturierten Daten verwenden, ist dies das geeignete Werkzeug. Es gibt keinen Leistungsvorteil, wenn Sie insertAdjacentHTML verwenden oder Knoten explizit zum DOM hinzufügen, nachdem es erstellt wurde. Ich habe es auf drei verschiedene Arten mit einem alten Skript getestet, mit dem ich einmal eingehende Modemanrufe für einen 24/7-Dienst auf einer Bank mit 4 Modems geplant hatte. 

Wenn es fertig ist, erstellt dieses Skript über 3000 DOM-Knoten, hauptsächlich Tabellenzellen. Auf einem 7 Jahre alten PC, auf dem Firefox unter Vista ausgeführt wird, dauert diese kleine Übung weniger als 2 Sekunden, um document.write aus einer lokalen 12-kb-Quelldatei und drei 1px-GIFs zu verwenden, die etwa 2000-mal wiederverwendet werden. Die Seite erscheint nur vollständig gebildet und ist bereit für Ereignisse.

Die Verwendung von insertAdjacentHTML ist kein direkter Ersatz, da der Browser Tags schließt, für die das Skript geöffnet bleiben muss. Es dauert doppelt so lange , um eine manipulierte Seite zu erstellen. Das Schreiben aller Teile in einen String und das Weiterleiten an insertAdjacentHTML dauert noch länger, aber Sie erhalten die Seite zumindest so, wie sie entworfen wurde. Andere Optionen (z. B. manuelles Erstellen des DOM-Knotens zu einem Zeitpunkt) sind so lächerlich, dass ich nicht einmal dorthin gehe. 

Manchmal ist document.write das zu verwendende Ding. Die Tatsache, dass es sich bei JavaScript um eine der ältesten Methoden handelt, ist kein Punkt dagegen, sondern ein zu seinen Gunsten - es ist ein hochoptimierter Code, der genau das tut, was er von Anfang an getan hat und getan hat. 

Es ist schön zu wissen, dass es alternative Nachlademethoden gibt, aber es muss verstanden werden, dass diese ausschließlich für einen anderen Zweck gedacht sind. nämlich das DOM ändern, nachdem es erstellt und dem Speicher zugewiesen wurde. Die Verwendung dieser Methoden ist von Natur aus ressourcenintensiver, wenn Ihr Skript den HTML-Code schreiben soll, aus dem der Browser das DOM erstellt. 

Schreiben Sie es einfach und lassen Sie den Browser und den Interpreter die Arbeit erledigen. Dafür sind sie da.

PS: Ich habe gerade mit einem onload-Parameter im body-Tag getestet, und selbst an diesem Punkt ist das Dokument noch wie vorgesehen open- und document.write()-Funktionen. In der neuesten Version von Firefox ist auch kein Leistungsunterschied zwischen den verschiedenen Methoden erkennbar. Natürlich wird irgendwo im Hardware-/Software-Stack eine Tonne Zwischenspeicherung ablaufen, aber das ist wirklich der Punkt - lassen Sie die Maschine die Arbeit machen. Auf einem billigen Smartphone kann es jedoch einen Unterschied machen. Prost!

2
bebopalooblog