Quelltext der Seite Styleguide:Techn. Integration via iFrame

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

''Integrationen 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 Berlin.de / BerlinOnline 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 Berlin.de / BerlinOnline darzustellen.

[[Kategorie: Dokumentation]][[Kategorie:Entwickler: fboes]]