Skip to main content
  1. Posts/
  2. blog.dsinf.net/

Na bardzo szybko: automatyczna zmiana rozmiaru iframe w HTML

·141 words·1 min
blog.dsinf.net html
Daniel Skowroński
Author
Daniel Skowroński

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