I-Frame Interaktion

[Der HTML-MAN]

Liebes SelfHTML-Team,

ich habe eine Frage bezüglich den I-Frames: Könnte man - ob per JavaScript oder (Wenn es geht) per HTML ist egal - den I-Frame so schreiben, dass er nur dann erscheint, wenn ein Button angeklickt wurde? Wenn ja, wie? Ich bitte um schnelle Antwort

[Julius]

Ja, indem du beim Klick auf den Button die display-Eigenschaft per Javascript (style-Eigenschaft) änderst, alternativ kannst du die Klasse ändern und damit display:none; bzw. display:block; setzten.

Gruß
Julius

[Camping_RIDER]

Aloha ;)

Nur als Ergänzung...

Ja, indem du beim Klick auf den Button die display-Eigenschaft per Javascript (style-Eigenschaft) änderst, alternativ kannst du die Klasse ändern und damit display:none; bzw. display:block; setzten.

Im Allgemeinen ist Letzteres besonders empfehlenswert, da bei der ersten Variante (direktes Ändern per JavaScript) Probleme auftauchen können - so ist es bspw. in den meisten Browsern nicht ohne weiteres möglich, eine solche direkte Änderung wieder rückgängig zu machen (die JavaScript-style-properties werden default nicht mit den errechneten CSS-Werten "gefüllt", sind also nur begrenzt auslesbar). Die Klassen-Lösung ist da deutlich flexibler, plus separation of concerns, plus Nutzbarkeit auch außerhalb JavaScript (z.B. zur Manipulation des serverseitigen Default-Zustand). Statt Klassen könnten (falls angebracht) auch data-*-Attribute eingesetzt werden, Klassen sind aber im Allgemeinen einfacher zu handeln.

Grüße,

RIDER

[Gunnar Bittersmann]

@@Camping_RIDER

Nur als Ergänzung...

Die einer weiteren bedarf.

Ja, indem du beim Klick auf den Button die display-Eigenschaft per Javascript (style-Eigenschaft) änderst, alternativ kannst du die Klasse ändern und damit display:none; bzw. display:block; setzten.

Im Allgemeinen ist Letzteres besonders empfehlenswert, da bei der ersten Variante (direktes Ändern per JavaScript) Probleme auftauchen können - so ist es bspw. in den meisten Browsern nicht ohne weiteres möglich, eine solche direkte Änderung wieder rückgängig zu machen

Nein? Doch. Oh!

<HTMLElement>.style.display = ''; sollte Änderungen durch JavaScript rückgängig machen und display auf den im Stylesheet (das kann auch das Browserstyleet sein) angegebenen Wert zurücksetzen. Und zwar in den meisten (lies: allen?) Browsern.

Die Klassen-Lösung ist da deutlich flexibler, plus separation of concerns

Die Angabe, wie etwas dargestellt wird, gehört unzweifelhaft ins Stylesheet. Darum geht’s hier aber nicht; sondern darum, ob etwas dargestellt wird. Und das darf sich durchaus im Markup/DOM wiederspiegeln. Separation of concerns ist hier nicht per se ein Grund gegen Inline-style-Attribute.

Statt Klassen könnten (falls angebracht) auch data-*-Attribute eingesetzt werden,

Was für Daten sollten da drinstehen? data-hidden="true"??

Klassen sind aber im Allgemeinen einfacher zu handeln.

Inwiefern wäre [class~="hidden"] „einfacher zu handeln“ als [data-hidden="true"]? Weil es für ersteres die Kurzschreibweise .hidden gibt?

Klassen sind nicht Mittel der Wahl, wenn es bessere Attribute gibt. Womit nicht data-… gemeint ist; schon eher aria-hidden.

Aber auch das ist nicht Mittel der Wahl, wenn es ein besseres Attribut gibt: hidden. Natives HTML.

“Documents that use style attributes on any of their elements must still be comprehensible and usable if those attributes were removed.
Note: In particular, using the style attribute to hide and show content, or to convey meaning that is otherwise not included in the document, is non-conforming. (To hide and show content, use the hidden attribute.)” [Spec]

In JavaScript einfacher zu handeln als alles andere: <HTMLElement>.hidden = true; bzw. <HTMLElement>.hidden = false;.

Für alte IEs kann man noch [hidden] { display: none } ins Stylesheet schreiben – gegebenfalls auch mit !important.

LLAP 🖖

[Gunnar Bittersmann]

@@Der HTML-MAN

Könnte man - ob per JavaScript oder (Wenn es geht) per HTML ist egal - den I-Frame so schreiben, dass er nur dann erscheint, wenn ein Button angeklickt wurde?

Eine JavaScript-freie Lösung wäre, keinen Button, sondern einen Anker-Link zum Iframe vorzusehen (den man natürlich so stylen kann, dass er wie ein Button aussieht).

<a href="#myIframe">Iframe anzeigen</a>
<iframe id="myIframe" …></iframe>

Per :target-Pseudoklassenselektor wird der Iframe versteckt, wenn er nicht angewählt wurde:

#myIframe:not(:target) { display: none }

Damit auch Screenreader die geänderte Sichtbarkeit mitbekommen, ist womöglich noch ein ARIA-Attribut nötig.

LLAP 🖖