iframe mit variabler Höhe - Gleiche und unterschiedliche Domain

msteudtn commented 3 years ago

Hintergrund:

Im Ticket #13 wurden zwei Skripte erstellt um den Mat-o-Wahl per iframe einzubinden.
Eine Erweiterung, funktioniert nur auf der gleichen Domain (und passt die Höhe auch wieder an, wenn das Fenster kleiner wird)
Die andere Erweiterung funktioniert auch bei unterschiedlichen Domains (aber lässt das Fenster "lang", wenn es einmal groß war).

Ziel

Beide Skripte in eine einfache Erweiterung zusammen führen

msteudtn commented 3 years ago

Es war mir nicht möglich, alle Funktion in EINEM Skript unterzubringen.

Neue Skripte

Beim Cross-Domain-Laden kann die Eltern-Seite z.B. nicht auf die Höhe des <iframe> zugreifen. Deshalb benötigen wir eine Funktion innerhalb des Mat-o-Wahl-Frames, welche ihre aktuelle Höhe nach außen schickt.

addon_check_iframe_resize_client.js -> fnCheckBodyHeight() -> alle 250ms

Die CLIENT-Funktion wird in der DEFINITION.JS über die addon-Variable geladen.

var addons = ["extras/addon_check_iframe_resize_client.js"]

Die Höhe wird dann von der Eltern-Seite (mit dem eingebunden <iframe>) empfangen. Die Seite kann nun ihr iframe-Element auch anpassen.

addon_check_iframe_resize_host.js -> fnMatoWahlIframeEventListener() -> meinIframe.height = data + "px"

Außerdem erfolgt das Anpassen (der Höhe) in einem sanften Übergang / Bildlauf von 1,5 Sekunden.

meinIframe.style.transition = "height 1.5s"

Einbinden

Diese Listener-Funktion muss in der Eltern-Seite noch eingefügt werden, z.B. so:

  <script src="https://www.seite-von-meinem-kleinen-verein.de/mat-o-wahl/extras/addon_check_iframe_resize_host.js"></script>

  <iframe id="myIframe" src="https://www.seite-von-meinem-kleinen-verein.de/mat-o-wahl/index.html" style="min-width:100%;" loading="lazy">
  </iframe>

  <script type="text/javascript">
   document.getElementById("myIframe").addEventListener( "load", function() { fnMatoWahlIframeEventListener("myIframe"); } );
  </script>

Bisherige Skripte

Die bisherigen Skripte ADDON_CHECK_IFRAME_RESIZE_SAME_DOMAIN und ADDON_CHECK_IFRAME_RESIZE_CROSS_DOMAIN sollten nicht mehr genutzt werden.

Das _SAME_DOMAIN-Skript nutzt die Object.prototype.watch()-Funktion. Laut MDN ist diese inzwischen veraltet und wird demnächst entfernt. :( https://developer.mozilla.org/en-US/docs/Archive/Web/JavaScript/Object.watch

Das _CROSS_DOMAIN-Skript hat keinen sanften Bildlauf und verkleinert den Frame nicht, wenn sich der Inhalt verkleinert.

Bekannte Bugs

Wenn man zur nächsten Frage springt, kann es (in seltenen Fällen) passieren, dass das Frame-Fenster die Frage teilweise wieder verdeckt. Das liegt daran, dass die Fragen und Antwort-Buttons kurz ausgeblendet werden (so dass man nicht aus versehen doppelt klickt). Damit reduziert sich auch die Frame-Höhe. Im Moment wird alle 250ms die Höhe geprüft. Der Bildlauf liegt bei 1,5 Sekunden. Mit dieser Einstellung ist meiner Meinung ein guter Kompromiss gefunden.

fenglisch commented 3 years ago

Super! Ich habe es same domain getestet und es funktioniert (nehme an, dass es cross domain genauso klappt): https://mitwirk-o-mat.de/spielwiese/

Custom JS in WordPress einzufügen, ist etwas umständlich, und wenn ich es richtig verstanden habe, ist das jetzt auch bei same domain notwendig, richtig? Da war das alte Same-Domain-Skript angenehmer für Nutzer:innen, die nur eine Mat-O-Wahl-Instanz haben und auf derselben Domain einbetten (beim Mitwirk-O-Mat müssen wir vermutlich ohnehin meist cross domain einbetten, da ist das neue Skript besser für uns). Wenn das alte Same-Domain-Skript jedoch veraltete Funktionen nutzt, ist vermutlich trotzdem besser, es rauszunehmen und nur noch das neue Doppel-Skript anzubieten.

msteudtn / Mat-O-Wahl