document.write ersetzten
Gerd
- javascript
Guten Tag,
ich möchte "document.write()" ersetzten. Ruft man eine funktion auf, die mit document.write() schreibt, dann wird an die Stelle geschrieben, an der die Funktion aufgerufen wurde.
Erstetzt man nun in der Funktion das document.wirte() durch document.createElement() etc. dann weiss die Funtion nicht, an welche Position sie das neue Element im Baum erstellen soll. Im Beispiel unten habe ich mir mit "id" Attributen geholfen - finde es aber nicht sehr elegant!
"this" und "caller" helfen mir z.B. nicht weiter ...
Ich hoffe es ist okay, wenn ich hier validen Code einfüge. Man kann das Beispiel ohne nacheditieren laufen lassen.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Test</title>
</head>
<body>
<script type="text/javascript">
function eadr_print(obj_id, email_user, email_server)
{
var Anker = document.createElement("a");
var AnkerText = document.createTextNode(email_user);
var AnkerHRefAttr = document.createAttribute("href");
AnkerHRefAttr.nodeValue = "mailto:" + email_user + "@" + email_server;
Anker.appendChild(AnkerText);
Anker.setAttributeNode(AnkerHRefAttr);
document.getElementById(obj_id).parentNode.insertBefore(Anker, document.getElementById("obj_id"));
}
</script>
<h1>
Siehe Quelltext
</h1>
<p>
Wenn du mich nicht erreichtst kannst du
<script id="email_pos_1" type="text/javascript">
eadr_print('email_pos_1', 'Mama', 'home.de');
</script>
oder
<script id="email_pos_2" type="text/javascript">
eadr_print('email_pos_2', 'Papa', 'home.de');
</script>
anmailen.
</p>
<p>
<a href="http://validator.w3.org/check?uri=referer">
<img style="border:0;width:88px;height:31px"
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" />
</a>
</p>
</body>
</html>
Hallo,
ich möchte "document.write()" ersetzten.
Wieso?
Entweder du verwendest Unobtrusive JavaScript - dann bringst du die nötigen Informationen im HTML unter, z.B. mit data-Attributen. Das JavaScript läuft dann über das DOM und nimmt die nötigen Ersetzungen vor. An welcher Stelle etwas eingefügt werden muss, wird dem Script dann aus dem Kontext klar. In diesem Fall solltest du das JavaScript streng vom HTML trennen. Also keine manuellen Aufrufe mitten im Dokument. So arbeiten viele Anti-Spam-Scripte und es ist aus JavaScript-Sicht die beste Lösung.
Oder du rufst die Funktion weiter manuell auf. Dann ist document.write das Mittel der Wahl. Wieso willst du es ersetzen?
Im Beispiel unten habe ich mir mit "id" Attributen geholfen - finde es aber nicht sehr elegant!
Unter den gegebenen Umständen ist das eine ganz gute Lösung. Es gibt natürlich bessere - mit Unobtrusive Scripting.
Es gibt auch ohne document.write eine Möglichkeit, in einem script-Element an das script-Elementobjekt zu kommen, das gerade ausgeführt wird. Es ist nämlich das letzte bekannte script-Element im Dokument.
<!DOCTYPE html>
<html>
<body>
<p>bla</p>
<script>
[code lang=javascript](function () {
var scripts = document.getElementsByTagName('script');
var script = scripts[scripts.length - 1];
var text = document.createTextNode('foo');
script.parentNode.replaceChild(text, script);
})();
</script>
</body>
</html>[/code]
Das funktioniert, weil die Ausführung von (synchronen) script-Elementen das HTML-Parsing anhält. Allerdings ist das nicht weniger »gehackt« und ich würde es nicht so lösen.
Mathias
ich möchte "document.write()" ersetzten.
Wieso?
Weil es in xhtml nicht erlaubt ist (oder denke ich da völlig falsch?)
Entweder du verwendest Unobtrusive JavaScript - dann bringst du die nötigen Informationen im HTML unter, z.B. mit data-Attributen. Das JavaScript läuft dann über das DOM und nimmt die nötigen Ersetzungen vor. An welcher Stelle etwas eingefügt werden muss, wird dem Script dann aus dem Kontext klar. In diesem Fall solltest du das JavaScript streng vom HTML trennen. Also keine manuellen Aufrufe mitten im Dokument. So arbeiten viele Anti-Spam-Scripte und es ist aus JavaScript-Sicht die beste Lösung.
Verstanden habe ich hiervon, dass ich die Rohdaten in html unterbringen soll. Dann läuft ein javascirpt über den ganzen Baum und über den Ort an dem das Script Daten findet weiss es dann wo der Baum manipuliert werden soll. Das klingt gut! Und "mit den ganzen Objektbaum rekusriv durchsuchen" habe ich Erfahrung - das kriege ich hin.
Vestanden habe ich allerdings nicht, mit welchen Tags/Attributen ich die Daten in html einbinden sollte (<div data="emailadresse">
wird doch vermutlich einen Syntaxfehler hervorufen. Mir kommt die Frage wirklich ein bischen blöd vor weil das wohl der einfachere Akt ist - ich weiss wirklich nicht was du für das Dateneingeben vorschlägst.
Im Beispiel unten habe ich mir mit "id" Attributen geholfen - finde es aber nicht sehr elegant!
Unter den gegebenen Umständen ist das eine ganz gute Lösung. Es gibt natürlich bessere - mit Unobtrusive Scripting.
Ja - da werde ich nachschauen ... siehe oben.
Es gibt auch ohne document.write eine Möglichkeit, in einem script-Element an das script-Elementobjekt zu kommen, das gerade ausgeführt wird. Es ist nämlich das letzte bekannte script-Element im Dokument.
<!DOCTYPE html>
<html>
<body>
<p>bla</p>
<script>
[code lang=javascript](function () {
var scripts = document.getElementsByTagName('script');
var script = scripts[scripts.length - 1];
var text = document.createTextNode('foo');
script.parentNode.replaceChild(text, script);
})();
> </script>
> </body>
> </html>[/code]
>
> Das funktioniert, weil die Ausführung von (synchronen) script-Elementen das HTML-Parsing anhält. Allerdings ist das nicht weniger »gehackt« und ich würde es nicht so lösen.
Der Code ist intressant - aber wie du schon sagst ein bischen gekackt.
Danke!!! Gerd
ich möchte "document.write()" ersetzten.
Wieso?
Weil es in xhtml nicht erlaubt ist (oder denke ich da völlig falsch?)
Es ist nicht verboten, aber das Parsing von XML lässt es nicht ohne weiteres zu, dass per JavaScript Elemente währenddessen eingefügt werden. Daher haben die Browser davon abgesehen, es zu implementieren.
Im Übrigen gilt diese Einschränkung nur, wenn das XHTML auch als application/xml oder application/xhtml+xml ausgeliefert wird. Das ist in der Regel nicht der Fall und in der Regel auch nicht empfehlenswert, da nur wenige Browser, User Agents usw. diesen Verarbeitungsmodus korrekt unterstützen.
Meistens wird XHTML als gewöhnliches text/html ausgeliefert (»HTML-kompatibles XHTML«) und da funktioniert document.write ohne Probleme.
Verstanden habe ich hiervon, dass ich die Rohdaten in html unterbringen soll. Dann läuft ein javascirpt über den ganzen Baum und über den Ort an dem das Script Daten findet weiss es dann wo der Baum manipuliert werden soll. Das klingt gut! Und "mit den ganzen Objektbaum rekusriv durchsuchen" habe ich Erfahrung - das kriege ich hin.
Einfacher geht es, wenn du document.getElementsByClassName, document.querySelectorAll oder fertige Selektor-Engines wie Sizzle oder Slick verwendest, um Elemente herauszusuchen.
Vestanden habe ich allerdings nicht, mit welchen Tags/Attributen ich die Daten in html einbinden sollte (
<div data="emailadresse">
wird doch vermutlich einen Syntaxfehler hervorufen.
data-Attribute beginnen mit »data-« und haben dann einen beliebigen Namen. So kannst du die unterschiedlichen Daten geordnet speichern:
<p class="emailadresse" data-user="user" data-domain="example.org">
Das Auslesen ist bspw. mit getAttribute('data-user') möglich.
Mathias
Danke!!! Auf die Idee, nicht den ganzen Baum abzuklappern sonderen Klassen zu setzen, wäre ich nocht rechtzeitig selbst gekommen (weil schon gemacht).
Der Tipp mit den "geordnenten" data-Attributen ist super!!! Ich verspreche dir, das dein Tipp nicht für die Tonne war.
Gerd