Christiane Weigel Professional Expert for Digital Media

Webentwicklung & Webprogrammierung, Webdesign & Grafikdesign, Projektmanagement & Projektberatung, Suchmaschinenoptimierung & Online-Marketing.
Seit 2005 Ihre professionelle Expertin für die Erstellung von Websites und Online-Shops in Berlin Zehlendorf.

Javascript avoid document.write()

Google Chrome Konsole Warnung avoid document.write()

Eine direkte Ausgabe von JavaScript-Werten mit „document.write“ sollte heutzutage vermieden werden, da es den Weg zur Injektion von unerwünschtem und evtl. schädlichem Code öffnet. Google Chrome und andere Browser geben deshalb auch eine Warnung aus. Aber was tun, wenn man doch gerne z.B. ein Script verwenden möchte, um im Footer das Copyright mit der Jahreszahl zu verwenden und sich das selbstverständlich „von alleine“ zum Jahreswechsel umstellen soll?

So sah das früher aus:

 © <script>document.write(new Date().getFullYear());</script> Christiane Weigel Webdevelopment, Berlin

© 2024 Christiane Weigel Webdevelopment, Berlin

Und so sieht das Beispiel nach heutigen Konventionen aus:

© <span id="thisyear"></span><script>document.getElementById("thisyear").innerHTML = new Date().getFullYear();</script> Christiane Weigel Webdevelopment, Berlin
Dies ist die Ausgabe des Codes:

© 2024 Christiane Weigel Webdevelopment, Berlin

Was tun wir?

Statt „document.write()“ eröffnen wir ein leeres span-Element mit einer ID. Via getElementbyID sprechen wir das document an. in die Klammern kommt der Name der ID den wir individuell vergeben haben. Mit .innerHTML sagen wir dem Script, dass es aus dem folgenden ein HTML-Element machen soll. getFullYear steht für den Standard in Javascript. Weitere Standards findet ihr z.B. hier: – Beide Scripte liefern exakt das gleiche Ergebnis. Jedoch wird die Konsole im ersten Fall eine Warnung ausgeben. – Der Script-Type darf inzwischen ebenfalls entfallen. – Hübsch machen könnt ihr das – wie immer – indem ihr dem span, div oder welchem Container auch immer eine ID oder Klasse zuweise und dann via CSS stylt.

Mehr dazu:

wiki.selfhtml.org Google Developers

Tipps, Tricks, Snippets und Scripts rund ums Web

Dabei kann es sich um die DSGVO, neue Designs oder auch ganz neue Technologien im Web gehen. Und ich stelle immer mal wieder technische Informationen, Codesnippets und kleine Tutorials ein.