iFrame Resizer

Der iFrame Resizer kommt dann zum Einsatz, wenn eine Webseite per iFrame in eine andere eingeunden wird. Um nun die Höhe des iFrames optimal setzen zu können, sprich, so, dass sie sich an den Inhalt der geframten Seite anpasst und somit keine Scrollbalken erscheinen, wird der sog. iFrameResizer eingesetzt. Es gibt 2 Varianten, wie der iFrame Resizer zum Zug kommen kann.

Verwendet wird die iFrameResizer Javascript Library, die auf GitHub als Opensource verfügbar ist:

https://github.com/davidjbradshaw/iframe-resizer

a) moPage als geframte Seite (Content Window)

Die moPage wird in einer bestehenden Webseite/Portal als Inhalt eines iFrames eingebunden. Hierfür muss die hosting Webseite, also die auf der der <iframe> Tag ist, folgende Javascript Library (von GitHub) geladen und entspr. konfiguriert haben:

Hiervon muss das File iframe-resizer/js/iframeResizer.min.js antsprechende geladen werden:

<script type="text/javascript" src="/path/to/iframe-resizer/js/iframeResizer.min.js"></script>

Weiter muss dann für das entspr. iFrame der Resizer wie folgt initialisiert werden:

<iframe id="myIFrame" src="https://www.link.zur/seite" allowfullscreen></iframe>

<script type="text/javascript">$("#myIFrame").iFrameResize( {log: true, checkOrigin: false}); </script>

Abmessung iFrame (Empfehlung):

Minimale iFrame Breite: 400px
Maximale iFrame Breite: 880px

Beispiele: Verschiedene Implementierungen bei Kunden

b) moPage als Hosting Seite (Host Window)

Die moPage bettet mittels <iframe> fremden Content. Hierfür muss auf der eingebundenen Seite folgende Javascript Library geladen werden:

<script type="text/javascript" src="/path/to/frame-resizer/js/iframeResizer.contentWindow.min.js"></script>