Pit: Welche Vorgehensweise ist hier die Richtige

Hallo Forum,

ich bin gerade etwas verunsichert, wie für meine Problemstellung die richtige Vorgehensweise ist:

Ich habe innerhalb einer Seite ein Iframe als Lightbox geöffnet. Nun möchte ich per "Element" aus dem Iframe Selbiges schließen und zudem im Parent Window eine neue Seite öffnen.

  1. Was nehme ich als "Element"? Ich dachte an einen Button.
  2. Muß ich die Weiterleitung im Parent Window zwingend per JS machen? (Mir fällt nicht ein, wie ich es über php machen könnte)

Pit

  1. Hi,

    Ich habe innerhalb einer Seite ein Iframe als Lightbox geöffnet. Nun möchte ich per "Element" aus dem Iframe Selbiges schließen und zudem im Parent Window eine neue Seite öffnen.

    Wenn im parent eine neue Seite geladen wird, ist der Iframe doch automatisch weg.

    ⇒ Link auf die neue Seite, mit Target _parent.

    cu,
    Andreas a/k/a MudGuard

    1. Hallo Andreas,

      Wenn im parent eine neue Seite geladen wird, ist der Iframe doch automatisch weg.

      Oh, das wußte ich nicht. Danke Dir dafür. (Gut, dass ich nachgefragt habe!)

      Pit

  2. Ich habe innerhalb einer Seite ein Iframe als Lightbox geöffnet. Nun möchte ich per "Element" aus dem Iframe Selbiges schließen und zudem im Parent Window eine neue Seite öffnen.

    1. Was nehme ich als "Element"? Ich dachte an einen Button.

    Dann mit JS. Ohne JS geht es mit einem Link nebst target-Attribut:

    <a href="/foo/bar" target="_top">/Foo/Bar</a> 
    

    Freilich bis Du nicht daran gehindert, einen Link wie einen Button aussehen zu lassen.

    2. Muß ich die Weiterleitung im Parent Window zwingend per JS machen? (Mir fällt nicht ein, wie ich es über php machen könnte)

    Wie gezeigt muss das nicht sein.

    1. Hi,

      Ich habe innerhalb einer Seite ein Iframe als Lightbox geöffnet. Nun möchte ich per "Element" aus dem Iframe Selbiges schließen und zudem im Parent Window eine neue Seite öffnen.

      1. Was nehme ich als "Element"? Ich dachte an einen Button.

      Dann mit JS.

      Nicht notwendigerweise. Button als Submit-Button, in einem form, das die neue Seite als action hat, und target _parent.

      cu,
      Andreas a/k/a MudGuard

      1. Button als Submit-Button, in einem form, das die neue Seite als action hat, und target _parent.

        Das mag funktionieren, ist aber ein grauenhafter Aufwand. Wer hat nur spezifiziert, dass <BUTTON> nicht auch ein HREF-Attribut [+ TARGET] haben darf – dann aber seine übrigen Eigenschaften (gemeint ist damit submit() und dergleichen für Formulare) verliert.

        Übrigens: "_top", nicht "_parent". "_parent" mag nur interessant sein, wenn ein iframe in einem (i)frame liegt und der äußere "Fensterstack" erhalten bleiben soll. Soll die neue Seite als komplettes Fenster bzw. Tab geladen werden, dann "_top".

        1. Lieber Jörg,

          Wer hat nur spezifiziert, dass <BUTTON> nicht auch ein HREF-Attribut [+ TARGET] haben darf – dann aber seine übrigen Eigenschaften (gemeint ist damit submit() und dergleichen für Formulare) verliert.

          Buttons lösen Aktionen aus, die auf der Seite passieren. Traditioneller Weise schicken sie Formulare ab. Links tun das nicht (ohne JS). Links verweisen auf andere Dokumente, das action-Attribut in Formularen zu einer "Auswertungsseite", die unmittelbar mit dem Formular zu tun hat.

          Wo möchtest Du jetzt diese zwei verschiedenen Konzepte in einem gemeinsamen HTML-Element zusammenführen?

          Liebe Grüße,

          Felix Riesterer.

          1. Wo möchtest Du jetzt diese zwei verschiedenen Konzepte in einem gemeinsamen HTML-Element zusammenführen?

            Ich wüsste nicht wieso man nicht den Button als verlinkendes Element spezifizieren können soll, welcher dann (wenn das href-Attribut gesetzt wird) eben seine Formular-Funktionen verliert.

            Immerhin ist es nicht gerade trivial, Links so zu gestalten dass diese in allen Browsern exakt wie die Buttons aussehen. Und ja: Es gibt Situationen, wo genau das wünschenswert ist. Bisher geht da wohl so mancher oder frauche den Umweg über ein Formular oder eben Javascript. Beides halte ich für schreckliche Ansätze.

            1. Hallo ursus contionabundo,

              Immerhin ist es nicht gerade trivial, Links so zu gestalten dass diese in allen Browsern exakt wie die Buttons aussehen.

              Es gibt

              a {
                -webkit-appearance: button;
                -moz-appearance: button;
                appearance: button;
              }
              

              Da ist bis auf IE11 und opera mini alles dabei.

              Bis demnächst
              Matthias

              --
              Pantoffeltierchen haben keine Hobbys.
              ¯\_(ツ)_/¯
            2. @@ursus contionabundo

              Immerhin ist es nicht gerade trivial, Links so zu gestalten dass diese in allen Browsern exakt wie die Buttons aussehen. Und ja: Es gibt Situationen, wo genau das wünschenswert ist.

              Wer wünscht das? Und warum?

              Links und Buttons sind unterschiedliche UI-Elemente mit unterschiedlichen Bedeutungen. I.d.R. ist es wünschenswert, dass die Funktion eines UI-Elements aus dessen Gestaltung ersichtlich ist; unterschiedliche UI-Elemente also auch unterschiedlich aussehen.

              LLAP 🖖

              --
              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    2. Hallo ursus,

      <a href="/foo/bar" target="_top">/Foo/Bar</a> 
      

      Aber _top nur, wenn mein _parent auch zugleich mein _top ist, oder? 😉

      
      if (window.parent != window.top) {
        // We're deeper than one down
      }
      

      Pit

      1. Naja. frame in frame in frame ... ist anno 2019 „nicht so oft wünschenswert“ und Deiner Beschreibung nach auch nicht der Fall, weshalb eigentlich

        true == ( window.parent == window.top )
        

        gilt.

        Ende des letzten Jahrtausends und in den ganz frühen 2000ern haben wir uns hier noch Gedanken darüber gemacht, wie man aus fremden [i]frames ausbricht... Da waren die Moden (und Modi!) noch ganz andere.

        1. ... und Deiner Beschreibung nach auch nicht der Fall

          Das hast du genau richtig interpretiert 😀

          true == ( window.parent == window.top )

          
           gilt. 
          
          

          Für meinen Fall auf jeden Fall, also danke. 😀

          Pit