iframe mit variabler Höhe - Gleiche und unterschiedliche Domain

[msteudtn]

Hintergrund:

• Im Ticket iframe mit variabler Höhe ermöglichen #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]

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]

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.