single.php
< Beitrag von Dirk Theisen

Automatische Höhe für iFrames in SharePoint

In Microsoft SharePoint-Portalprojekten kommt man häufig in die Situation, vorhandene webbasierende Lösungen (Drittsysteme) in die neue SharePoint-Umgebung integrieren zu wollen. Fertige Erweiterungen oder Webparts für die Integration in SharePoint stehen vor allem bei eigenentwickelten Weblösungen zumeist leider nicht zur Verfügung.

Weil eine Migration oder Neuentwicklung auf SharePoint beispielweise bei Systemen, deren Lebenszyklus eher dem Ende entgegen geht, nicht gewünscht ist, kommt regelmäßig der gute alte Vorschlag, die Weblösung „doch einfach als iFrame in SharePoint einzubetten„.

Natürlich sind iFrames unter Webentwicklern wegen diverser Nachteile, auf die ich hier nicht näher eingehen möchte, verrufen und aus einem Integrationsgedanken eine eher schwache Umsetzung. Allerdings sind wir so häufig nun mal Pragmatiker und für jene haben iFrames den klaren Vorteil, quick and dirty  (sofern die zu integrierende Seite es zulässt) einsetzbar zu sein. Auch SharePoint bringt „glücklicherweise“ bereits ein Webpart Seiten-Viewer zur Einbettung von Webseiten als iFrame mit.

Nun gut – verwenden wir also das Seiten-Viewer-Webpart zur Integration einer Webseite, in diesem Fall exemplarisch Wikipedia, entfernen in den Webpart-Eigenschaften noch die Titelleiste und überprüfen, ob die Höhe auf „automatisch“ (keine feste Höhe) eingestellt ist. Somit ergibt sich zunächst folgendes Ergebnis:

iFrame mit automatsicher Höher

 

Die tatsächlichen Höhe wird nicht beachtet – zwei (typische) Lösungswege

Hier zeigt sich bereits unser Problem: Die automatische Höhe beachtet die tatsächliche Höhe der zu integrierenden Webseite leider nicht. Erster Ausweg: Wir setzen die Webpart-Höhe auf einen festen Wert – allerdings funktioniert dies nur bei einzubettenden Seiten mit statischer Höhe, was recht selten der Fall sein sollte. Was nun? In dieser Situation findet man fast immer zwei klassische Workarounds vor:

1. Man wählt eine feste Höhe (z.B. 600 Pixel), um die meisten Auflösungen/Browserhöhen ungefähr zu treffen.

2. Man wählt eine feste sehr große Höhe (z.B. 3000 Pixel), welche die der dynamischen Seiten möglichst übertrifft.

Beide Ansätze wirken nur auf den ersten Blick elegant und haben entscheidende Nachteile:

  • In Variante 1 wird sich nur in den seltensten Fällen eine einheitliche Auflösung für alle User ausfindig machen lassen können, insbesondere wegen des vermehrten Zugriffs auf SharePoint-Seiten auch mit mobilen Devices. Für die User mit einer vom definierten Standard abweichenden Bildschirmauflösung bedeutet dies entweder doppelte Scrollbalken oder ein eingeschränkter Bildschirmausschnitt, auf dem die zu integrierende Seite (wieder mit Scrollbalken) dargestellt wird.
  • Ansatz 2 löst zwar die Seiteneffekte von Ansatz 1, generiert aber für die meisten zu integrierenden Seiten unnötige Whitespaces am Ende der Seite und damit Scrollbalken bis ins Nirvana.

Die passende Höhe mit Hilfe eines Scripts dynamisch festlegen

Ideal wäre nun also eine Lösung, die unabhängig von Auflösung bzw. Browserfenstergröße des Users das Webpart auf den vollständigen Bildschirmausschnitt der SharePoint-Seite anpasst, um nur noch (falls nötig) den Scrollbalken der einzubettenden Seite anzuzeigen. Dies kann mithilfe des folgenden Scripts erreicht werden.

Das Skript berechnet zunächst die Fensterhöhe und setzt anschließend die Webpart-Höhe auf diesen Wert, abzüglich der Höhe, welche für Ribbon, Suitebar, Footer und ähnliche Elemente benötigt wird. Dieser Offset (in unserem Fall 230px) ist natürlich abhängig der SharePoint-Umgebung und dem dort verwendeten Branding/Design. Weiterhin finden sich (optional) noch ein paar CSS-Anpassungen, um den vorhandenen Abstand an den Rändern etwas effizienter zu nutzen.

Binden wir also unser Skript als HTML-Datei in die Website ein (hier über das Inhalts-Editor-Webpart mit ausgeblendeter Titelleiste), so sehen wir das gewünschte Ergebnis – eine Webpartgröße, welche sich der aktuellen Fenstergröße des Browsers anpasst:

iFrame mit automatischer Höhe (via Script)

Als kleines nettes Add-on kann man nun das Inhalts-Editor-Webpart mit der Referenz zum o.g. Script exportieren, den Webpart-Namen z.B. auf „Automatische iFrame Höhe“ ändern und es anschießend in den Webpart-Katalog hochladen, wodurch es auf der ganzen SharePoint Site Collection bereitsteht.

Folgen
X

Folgen

E-mail : *
Kategorie: SharePoint | Schlagwörter: , , , | Kommentare: 0

Beitrag kommentieren

CAPTCHA * Time limit is exhausted. Please reload CAPTCHA.