Iframe – dostosowanie wielkości okna do jego zawartości

Iframe to przeżytek w czasie HTML’a 5 ale wciąż często wykorzystywany jest w wielu przypadkach, wciąż jeszcze szczególnie chętnie w czasach facebooka, google+ oraz w przypadku różnych ajaxowych sztuczek umożliwiających dynamiczne podmienianie treści.

HTML5. Zaawansowane programowanie

HTML5. Zaawansowane programowanie

Autor:
Peter Lubbers, Brian Albers, Frank Salim

ISBN:
978-83-246-4809-2

Format:
168x237

Liczba stron:
296

Data wydania:
2013-02-18

Cena:
59.00zł


Jego wyjątkową wadą jest brak podatności na stylowanie czy zmianę parametrów wysokości i szerokości. Raz nadany parametr width czy height trudny jest do dynamicznego stylowania. Jak wówczas poradzić sobie z problemem? W sieci znalazłem fajne rozwiązanie tego problemu za pomocą krótkiego kodu jQuery, skutecznie zwalczającego ten problem.

Na samym dole zostawiam link do treści w której rozwiązanie problemu znalazłem.

Jak działa?
Jquery pobiera zawartość znacznika body zawartego w iframe a następnie po upływie 1/100 sekundy (w czasie praktycznie niewidocznym dla oka) za pomocą setInterval ponownie ustawia wielkość iframe, dodając przy okazji w css-ach minimalną szerokość i parametr „overflow” na ukryty zaś samą szerokość i wysokość ustawia na wartości pobrane wcześniej ze znacznika body.

$('iframe').contents().find('body').css({"min-height": "100", "overflow" : "hidden"});
setInterval( "$('iframe').height($('iframe').contents().find('body').height() + 20)", 1 );

link do źródła: stackoverflow.com

Leave a Reply