2010-06-16 16 views
17

Próbuję zmienić rozmiar (zrobić większe lub mniejsze) iframe w oparciu o jego zawartość. Po kliknięciu na każdej stronie wywoływana jest metoda zmieniająca rozmiar.iframe rozmiaru z scrollHeight w chrom/Safari

W Chrome można utworzyć iframe większe, ale nie mniejszy. document.body.scrollHeight jest zawsze największą wartością.

Więc jeśli jedna duża strona ustawia # iframe.height = "620px", a ktoś kliknie link do strony z mniejszą zawartością scrollHeight pozostanie na poziomie 620px zamiast maleć.

Jaki jest właściwy sposób obsłużyć to w Chrome/Safari?

Odpowiedz

21

Zanim poprosisz o wysokości dokumentu wewnątrz iframe należy ustawić wysokość obiektu iframe na „Auto”. Coś takiego:

objIframe = document.getElementById('theIframeId');  
objIframe.style.height = 'auto'; 

A teraz:

document.body.scrollHeight 

zwraca rzeczywistą wysokość dokumentu.

+0

Genialny! Walczyłem z tym od wielu dni! –

+2

Jeśli ktoś inny napotka na tym problem, to dla mnie ustawiono "document.body.scrollHeight" dla Firefoksa i "document.documentElement.scrollHeight" dla Chrome i cokolwiek innego ... Mój przykład wykorzystuje postMessage dla domeny krzyżowej 'if (isFirefox) { \t \t \t \t e.source.postMessage ('height:' + document.body.scrollHeight, e.origin); \t \t \t} else { \t \t \t \t e.source.postMessage ('wysokość:' + document.documentElement.scrollHeight, e.origin); \t \t \t} ' – nitsuj

+1

Dziękuję za odpowiedź, podaję go w moim iFrame biblioteki https://github.com/davidjbradshaw/iframe-resizer –

9

Czy spróbować użyć document.documentElement.scrollHeight zamiast?

+0

To. Ten zadziałał: D – chadkouse