speichern src in iframe

[effel]

Hallo,

ich habe ein Programm mit eingelagerten iframes. Ich will ein Bild in ein iframe bringen. In dem iframe-html-Text steht bereits:

<img id="WWW">
function src_eingeben2(){
let zwNode;
alert("2 src_eingeben");
//Vd ist die Adresse des iframe und funktioniert
alert("Vd.getElementById(WWW).id "+Vd.getElementById("WWW").id);//WWW
alert(Vd.getElementById("WWW").id);                         //WWW       
zwNode=Vd.getElementById("WWW").id;                        
alert(zwNode);                                              //WWW
alert(zwNode.src);                                         //undef
zwNode.src="bilder.jpg";                         //Fehler ?
alert(zwNode.src);                               //Fehler Abbruch
}
 eigentlich müßte es funktionieren,was ist daran falsch?

Effel und danke!

[MudGuard]

Hi,

                     //WWW       

zwNode=Vd.getElementById("WWW").id;

zwNode ist die id, NICHT das Element.

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo effel,

ZwNode enthält die id (eine Zeichenkette), nicht das img Element (ein HTMLImageElement Objekt).

zwNode=Vd.getElementById("WWW");

Rolf

[effel]

Ok, das war mein Fehler, es funktioniert nun. Aber das eigentliche Problem war, daß ich zwar mit:

newNode = Vd.createElement("IMAGE");
newNode.id="WWW";
arg1.surroundContents(newNode);

in den HTML_Text des iframe <img id="WWW"></img> platziert habe. Aber wenn ich src die BildAdresse speichern wollte, ging das nicht. Erst nachdem ist das iframe, das ich im Clienten um ein Bild erweitern wollte, zum Server(WebSocket) zurückgespeichert habe und dann wieder aufgerufen haben, konnte ich src eingeben. Es geht wahrscheinlich nicht anders.

Effel

[Rolf B]

Hallo effel,

was zum Geier tust Du da?

• createElemente("IMAGE") funktioniert nicht in HTML. Der Elementtyp für Bilder heißt IMG. Den Elementtyp IMAGE gibt es nur in SVG. D.h. du erzeugst ein generisches HTML Element ohne Funktion, das sich verhält wie ein SPAN, aber den Tag-Name "IMAGE" hat (was der Browser mittut, aber eigentlich verboten ist).

• deine Hypothese, dass Du mit dem gezeigten Code ein Element <img id="WWW"></img> erzeugt hättest, bezweifle ich sehr stark. Insbesondere bezweifle ich die Existenz von </img>, denn img ist ein leeres Element und verwendet kein Ende-Tag. Nie. Lediglich in XHTML muss man es als leeres Element als <img id="WWW" /> notieren.

• surroundContents muss auf ein Range-Element angewendet werden und erwartet das Elternelement, in das der Range eingesetzt werden soll, als Parameter. Ist arg1 ein Range? Was hast Du in diesem Range inkludiert (z.B. mit selectNode)? Die Elemente, die der Range umfasst, werden durch surroundContents in das funktionslose IMAGE-Element eingesetzt.

• Dass Du denn dem funktionslosen IMAGE-Element eine ID "WWW" zuweist, ändert dann auch nichts mehr.

Also.

• Du hast einen iframe. Hat der bereits ein src-Dokument oder ist er leer?
• Du möchtest darin ein Bild anzeigen und dafür ein img Element in das Dokument einbauen, das im iframe angezeigt wird? Bzw. ein Dokument generieren, das dieses img-Element enthält?

Frage: Warum? Warum nicht gleich ein img Element im Elterndokument erzeugen statt es in einen iframe einzupacken?

Aber wenn - du brauchst ein vollständiges HTML Dokument. Einfach ein img Element in den iframe zu knallen reicht nicht. Wie dafür am sinnvollsten vorgegangen wird, kann ich hier vom Tablet aus nicht ausprobieren.

Es hängt auch davon ab, wie der iframe erzeugt wird, ob er ein src-Attribut mit valider URL hat, ob das Dokument im iframe ersetzt oder erweitert werden soll - wir wissen hier zu wenig von dem, was bei Dir abläuft.

Rolf

[Gunnar Bittersmann]

@@Rolf B

• createElemente("IMAGE") funktioniert nicht in HTML.

Aber vielleicht (ohne das zuviele e) in JavaScript? 😉 Denn <image> funktioniert in HTML – es ist seit jeher ein Synonym für <img>.

Zum Stylen kann man aber nicht den Selektor image verwenden, es muss img sein, wovon man sich in diesem Codepen überzeugen kann. Das <image>-Tag generiert ein img-Element (HTMLImageElement [sic!]^[1]) im DOM.

Tut das document.createElement("image") auch? Nope. Wovon man sich auch im Codepen überzeugen kann. Damit wird ein image-Element generiert, was sich wie ein span verhält, d.h. die im src-Attribut angegebene Bildressource nicht als Bild darstellt.

🖖 Live long and prosper

---

1. Der Bezeichner rundet die Konfusion ab. ↩︎

[Matthias Scharwies]

Servus!

@@Rolf B

• createElemente("IMAGE") funktioniert nicht in HTML.

Aber vielleicht (ohne das zuviele e) in JavaScript? 😉 Denn <image> funktioniert in HTML – es ist seit jeher ein Synonym für <img>.

Zum Stylen kann man aber nicht den Selektor image verwenden, es muss img sein, wovon man sich in diesem Codepen überzeugen kann. Das <image>-Tag generiert ein img-Element (HTMLImageElement [sic!]^[1]) im DOM.

Tut das document.createElement("image") auch? Nope. Wovon man sich auch im Codepen überzeugen kann. Damit wird ein image-Element generiert, was sich wie ein span verhält, d.h. die im src-Attribut angegebene Bildressource nicht als Bild darstellt.

Ich habe das hier (SVG/Element/image) übernommen.

Sollte man das im Artikel über das HTML-img verlinken? Oder kommt man drauf, wenn man nach image sucht?

Vielen Dank für die Erhellung – oder bin ich jetzt verwirrter als vorher?! 😀

Herzliche Grüße
Matthias Scharwies

---

1. Der Bezeichner rundet die Konfusion ab. ↩︎

[Tabellenkalk]

Hallo,

oder bin ich jetzt verwirrter als vorher?! 😀

Ich habe Gunnar so verstanden, dass image bereits seit anfang an ein HTML-Element(-Alias) ist und daher von allen(?) Browsern als img interpretiert wird. D.h. mit SVG hat das nix zu tun und von JS wird es eben auch nicht (mehr?) unterstützt.

Gruß
Kalk

[Matthias Scharwies]

Servus!

Hallo,

oder bin ich jetzt verwirrter als vorher?! 😀

Ich habe Gunnar so verstanden, dass image bereits seit anfang an ein HTML-Element(-Alias) ist und daher von allen(?) Browsern als img interpretiert wird.

Genau, mit dem Schönheitsfehler, dass das HTMLImageElement-Objekt eigentlich falsch/ irreführend bezeichnet ist.

Und dass man das mit dem image-Tag erzeugte img-Element eben mit dem img-Selektor stylen muss.

D.h. mit SVG hat das nix zu tun

Doch den Namen! Wenn du im Wiki image suchst, kommst du in SVG raus, dort gibt es jetzt für diese Leute einen Hinweis zu HTML, dito auch auf der Seite zu img, aber eben unten etwas versteckt, weil es eben eine Nebensache ist.

und von JS wird es eben auch nicht (mehr?) unterstützt.

Gruß
Kalk

Herzliche Grüße
Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Genau, mit dem Schönheitsfehler, dass das HTMLImageElement-Objekt eigentlich falsch/ irreführend bezeichnet ist.

Der „Schönheitsfehler“ zieht sich durch viele Elemente (ist also keiner), bspw:

HTML-Elementtyp	Interface
p	HTMLParagraphElement
ol	HTMLOListElement
ul	HTMLUListElement
dl	HTMLDListElement
a	HTMLAnchorElement
q	HTMLQuoteElement

Und es gibt auch keine 1:1-Beziehung. Manche Elementtypen teilen sich ein Interface (h1 bis h6 alle HTMLHeadingElement), etliche sind einfach nur HTMLElement.

🖖 Live long and prosper

[effel]

Rolf

Der Gaier antwortet:

ja, IMG statt IMAGE das war der zweite Fehler.
es läuft alles ok

der Gaier bedankt sich

ok - Spaß darf mal sein

Effel

[effel]

Rolf,

Es soll Teil eines Web-Editors werden, denn ich
verwenden will um meine Konstruktionzeichnungen
auf Basis des goldenen Schitts zu ergänzen.

Ich habe - mit deiner Hilfe - zwischen meinenm 
Nodejs und dem Edge im selben PC eine WebSocket-
und eine Websevervebindung aufgebaut, die auch
gut funktioniert.
(der Webserver ist das Beispiel aus Selfhtml)

Warum?
um zu sehen, was in Nodejs konstruiert wurde.

Es läuft jetzt alles gut!

mit freundlichen Grüßen

Effel

[Rolf B]

Hallo effel,

warum setzt Du normalen Text in ~~~ ? Die Lesbarkeit wird dadurch nicht verbessert. Find ich…

Rolf

[Gunnar Bittersmann]

@@effel

 eigentlich müßte es funktionieren,was ist daran falsch?

So ziemlich alles. Angefangen bei der Formatierung deines Postings. Was hat <img id="WWW"> im JavaScript-Code zu suchen? Und wenn du die Sprache des Codes angibst, wird er durch Syntax-Highlighting etwas lesbarer. So war dein Posting eine ziemliche Zumutung für die Leser.

Und deine Frage hat weder mit „design/layout“ noch mit „programmiertechnik“ im Allgemeinen zu tun. Richtig wäre das Tag „javascript“ gewesen.

Deinen Fehler im JavaScript haben MudGuard und Rolf ja schon genannt. Aber noch ein Pro-Tip: console.log() oder console.debug() sind zum Debuggen besser geeigner als alert().

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

zum Debuggen besser geeignet

Vorausgesetzt, man hat einen Browser mit Entwicklertools verfügbar. Ich hoffe, dass Effel das hat, aber auf einem Tablet oder Handy muss man remote debuggen und ist aufgeschmissen, wenn man keinen passenden PC dafür hat.

Rolf