# 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.

<span style="white-space: pre-wrap;">Verwendet wird die </span>**iFrameResizer**<span style="white-space: pre-wrap;"> Javascript Library, die auf GitHub als Opensource verfügbar ist:</span>

[https://github.com/davidjbradshaw/iframe-resizer](https://github.com/davidjbradshaw/iframe-resizer)

### a) anthrazit Seite als geframte Seite (Content Window)

<span style="white-space: pre-wrap;">Die moPage wird in einer bestehenden Webseite/Portal als Inhalt eines iFrames eingebunden. Hierfür muss die hosting Webseite, also die auf der der </span>`<span class="editor-theme-code"><iframe></span>`<span style="white-space: pre-wrap;"> Tag ist, folgende Javascript Library (von GitHub) geladen und entspr. konfiguriert haben:</span>

<span style="white-space: pre-wrap;">Hiervon muss das File </span>`<span class="editor-theme-code">iframe-resizer/js/iframeResizer.min.js</span>`<span style="white-space: pre-wrap;"> antsprechende geladen werden:</span>

```
<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: 100%
```

  
<span style="white-space: pre-wrap;">Beispiele: </span>[Verschiedene Implementierungen bei Kunden](https://www.anthrazit.org/index.php?apid=299818825&apparentid=1826248785)

### b) anthrazit Seite als Hosting Seite (Host Window)

<span style="white-space: pre-wrap;">Die moPage bettet mittels </span>`<span class="editor-theme-code"><iframe></span>`<span style="white-space: pre-wrap;"> fremden Content. Hierfür muss auf der eingebundenen Seite folgende Javascript Library geladen werden:</span>

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