Styleguide:Techn. Integration via iFrame

Aus Imperia Support Wiki

Version vom 21. November 2016, 14:49 Uhr von Tay (Diskussion | Beiträge) (Iframe Größenanpassung)

Auf BerlinOnline Berlin.de existiert die Möglichkeit, Fremdinhalte mit einem iFrame in die reguläre Seite zu integrieren.

Integraionen per iFrame werden nur noch in Ausnahmefällen umgesetzt.

Voraussetzungen

  • Das iFrame muss über https abrufbar sein. Der Seitenaufruf, besonders über Google, erfolgt immer häufiger mit https und muss daher auch für das iFrame möglich sein.
  • Das iFrame sollte responsiv und damit mobil verwendbar sein.

Vorgehen

Folgendes müssen Sie dabei beachten:

  • Nennen Sie uns die URL, unter der wir den iFrame-Inhalt abrufen können.
  • Die für Sie zur Verfügung stehende Maximalbreite entnehmen Sie dem Styleguide:Portal, und nennen Sie uns die von Ihnen gewünschte Breite.
  • Nennen Sie uns die Höhe, die das iFrame haben soll. Am Besten wählen Sie dabei eine Höhe, die dem höchsten von Ihnen ausglieferten Inhalt entspricht, unter keinen Umständen aber mehr als 1200px.

Automatische Größenanpassung

Im Normalfall hat ein IFrame eine fest vorgegebene Größe.

Die Breite kann durch Angabe eines Prozentwertes an den zur Verfügung stehenden Platz angepasst werden. Eine Angabe von 100% für zur vollen Ausnutzung des verfügbaren Platzes. Das sollte der Normalfall sein, da nur so eine vernünftige Darstellung auf kleinen Geräten, wie Smartphones möglich ist.

Um die Höhe dem Inhalt des IFrames anzupassen sind einige zusätzliche Javascript Zeilen im Quelltext des IFrames notwendig:

 <script>
   if ("function" === typeof MutationObserver) {
       function postHandler(ev) {
           parent.postMessage(document.documentElement.getBoundingClientRect().height, "*");
       }
       new MutationObserver(function(mutations) {
               postHandler("mutation",null);
           }).observe(document, { attributes: true, childList: true, characterData: true, subtree: true });
       window.addEventListener('load', postHandler);
       window.addEventListener('resize', postHandler);
   }
 </script>

Diese Lösung übergibt die Länge der im IFrame dargestellten Seite an die Seite, die den IFrame enthält. Diese passt daraufhin die Höhe des IFrames an die erhaltene Seitenlänge an, so dass der IFrame-Inhalt vollständig dargestellt wird. Die Anpassung der Höhe erfolgt dabei sowohl beim Laden des IFrames, als auch, wenn es Veränderungen im Inhalt z.B. durch XHR-Aufrufe gibt.

Parameter-Übergabe

Die iFrame-Lösungen von B.de / BO erlauben in einem eingeschränkten Rahmen die Übergabe von Parametern aus der aufrufenden Seite an das iFrame.

Bsp.:

 http://www.berlin.de/iframe/index.php                 => http://www.beispiel.de/iframe.php
 http://www.berlin.de/iframe/index.php?a=0             => http://www.beispiel.de/iframe.php?a=0
 http://www.berlin.de/iframe/index.php/iframe2.php     => http://www.beispiel.de/iframe2.php
 http://www.berlin.de/iframe/index.php/iframe2.php?a=0 => http://www.beispiel.de/iframe2.php?a=0

Die iFrame übertragen dabei entweder POST oder (wenn kein POST vorhanden) auch GET-Parameter. Damit haben Sie die Möglichkeit, auch über Suchmasken Ergebnisseiten des iFrames aufzurufen.

Nachteile

Bei einer iFrame-Integration verlieren wir leider die Möglichkeit, Suchmaschinen auf Ihre Inhalte zu führen. Darüber hinaus sind von uns externe iFrames nicht statistisch erfassbar.

Sollte es Ihnen möglich sein, so bitten wir statt dessen um die Nutzung des Styleguide: Techn. Integration via Durchschleifung, um Ihre Inhalte integriert in B.de / BO darzustellen.