IFrame mit dynamischer Größe

sctech

@oschuetze In unserem Kontext ist die Umsetzung insofern korrekt, dass wir das IFrame innerhalb einer Lightbox anzeigen und diese sich in der Höhe immer der aktuellen Browserhöhe anpasst. Scrolling wird dann nur innerhalb der Lightbox verwendet.

Ich verstehe aber dein Anliegen: Der IFrame-Container soll immer so gross sein, wie der Inhalt der eingebetteten Seite. Leider ist das definitiv nicht ohne Anpassung durch ChurchTools möglich. Auf Grund der Same-origin policy kann die Hauptseite nicht auf Eigenschaften der eingebetteten Seite zugreifen, sofern die beiden Seiten nicht auf derselben Domains betrieben werden.

Heisst also, von Seite ChurchTools würde eine Erweiterung benötigt, die beim Load bzw. Resize der Seite, eine Funktion auf der übergeordneten Seite aufruft.

z.B. in der Art:

Code innerhalb des IFrames (seitens ChurchTools):

// Code inside iframe

window.addEventListener("load", calcHeight);
window.addEventListener("resize", calcHeight);

function calcHeight() {
   var height = document.getElementsByTagName("html")[0].scrollHeight;
   parent.postMessage(["setHeight", height], "*");
}

Code innerhalb der übergeordneten Seite:

window.addEventListener('message', function(e) {
  var $iframe = document.getElementsById("myiframe");
  var eventName = e.data[0];
  var data = e.data[1];
  switch(eventName) {
    case 'setHeight':
      $iframe.height(data);
      break;
  }
}, false);

Eine solche Erweiterung durch ChurchTools müssten wir dann wohl als Feature Request einordnen.

oschuetze

@seetalchile
Jep. In diese Richtung ging auch der Link, den ich in meinem ursprünglichem Posting erwähnt hatte. Danke trotzdem für Deine Analyse und Unterstützung. Zumindest sollten die Church-Tools Kollegen jetzt sehen, dass dieser Usecase sich nicht ohne eine kleine Anpassung im CT Code lösen lässt.

merhard

Das Problem ist folgendes.
Man kann aus sicherheitsgründen nicht auf den Inhalt eines iFrames zugreifen. Die Seite im iFrame könnte aber eine Nachricht an die Elternseite schicken und der mitteilen wie groß sie jetzt ist, damit die dann die größe des iFrames anpassen kann.

Dafür müsste aber Churchtools diesen Code bei sich einbauen, der die Nachricht an die Elternseite schickt.
Das fände ich auch ziemlich nice. Denn ohne sind iframes immer nur so ne halb gute Lösung.

Hier zum Beispiel sieht man den Code für Kind und Elternseite.
https://gist.github.com/jamenlyndon/170af98d77d93a0df01c

merhard

@merhard Ups, ich hab grad gesehen, dass steht ja schon alles im Ursprünglichen Post. Sorry

merhard

Wurde aber noch nicht verbaut, oder?

bwl21

@merhard gut fände ich auch wenn man dem iframe mitgeben könnten, wie groß er sein soll.

Noch besser fände ich wenn es andere Möglichkeiten anstelle iframe gäbe. Man könnte z.b. ein API haben, über das sich das aufrufende CMS das HTML holen und einbetten könnte.

merhard

@bwl21 Also eine API gibt es ja. Aber ob sich der Aufwand jetzt lohnt da jetzt einen eigenen API zugriff zu programmieren.
Für mich wäre alles gelöst, wenn der Iframe seine größe weitergeben würde, wie oben beschrieben.

bwl21

@merhard sagte in IFrame mit dynamischer Größe:

@bwl21 Also eine API gibt es ja. Aber ob sich der Aufwand jetzt lohnt da jetzt einen eigenen API zugriff zu programmieren.
Für mich wäre alles gelöst, wenn der Iframe seine größe weitergeben würde, wie oben beschrieben.

Wie kannst du dem iframe mitgeben, wie groß er sein soll?

merhard

@bwl21 Also man kann einem Iframe ja eine Festgelegte Höhe geben über das HTML Attribut height (Siehe https://www.w3schools.com/tags/tag_iframe.ASP)

Aber leider können wir nicht wissen wie lang der Inhalt des Iframes ist. Das entscheidet sich ja je nachdem wieviele Einträge z.b. in einer Liste geladen werden etc.
Dafür müsste Churchtools etwas ändern, so dass sich unser Iframe automatisch anpassen könnte.

merhard

Hey, ich hab für ein anderes Projekt mal eine Testseite gebaut, auf der so ein Iframe Resizing angewendet wird.

https://mark-erhard.de/iframe-test/

Bitte Bitte Churchtools (@jmrauen & @mhuber ), könnt ihr sowas nicht bitte mal einfügen. Das wären doch nur ein paar Zeilen Code, die ihr kopieren könntet ...

Andrej

@merhard das wäre top, wenn dies auch mit den CT iframes funktioniert!

matthiasdupont

Jetzt weiß ich auf jeden Fall wieso das bei uns auch nicht geklappt hat. Das wäre wirklich fantastisch, wenn das umgesetzt werden könnte!

jziegeler

wird mit der nächsten Version (vermutlich 11.09.23) für die Gruppenhomepage inklusive Unterseiten und den Kalender kommen. Wir haben diese Biblothek verwendet

Gelöst IFrame mit dynamischer Größe