Menu Zamknij

Na bardzo szybko: automatyczna zmiana rozmiaru iframe w HTML

Problem irytujący, ale rozwiązanie szybkie (jak się przeczyta ten artykuł ^^).

Skrypt, którego użyjemy to: http://davidjbradshaw.github.io/iframe-resizer/. Są trzy elementy: plik JS dla strony trzymającej iframe, plik JS dla każdej strony, która się pojawi wewnątrz iframe i wywołanie JavaScript na stronie z iframe. Działa wszędzie poza Operą Mobile (ale kogo to dziwi…) i WinPhone_IE10 (na WinPhone_IE11 nie wybucha i blokuje się na maksymalnych rozmiarach).

 
Strona „host”:

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<iframe id="nazwa" width="500px" scrolling="no" src="plik.html"></iframe>
<script src="https://raw2.github.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.min.js"></script>
<script>$("#nazwa").iFrameResize({});</script>

L1: jQuery [opcjonalny – można ładować iFrameResize({}) przez natywny kod JS]
L2: docelowy iframe; zdefiniowanie na sztywno któregoś z wymiarów zablokuje jego zmiany
L3: skrypt iframeResizer.min.js
L4: podpięcie funkcji pod obiekt

 
Strona „gość”:

<script src="https://raw.githubusercontent.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.contentWindow.min.js"></script>
treść lalala-trolololo; lorem ipsum

L1: skrypt iframeResizer.contentWindow.min.js
L2+:treść

 
Oczywiście skrypty należy załadować na swój własny serwer żeby było porządniej. Porządna, ale przydługa jak na błyskawiczne rozwiązanie typu „wirtualny duct-tape” – http://davidjbradshaw.github.io/iframe-resizer/.

Dodaj komentarz