2010-06-16 22 views
17

Estoy tratando de cambiar el tamaño (hacer más grande o más pequeño) un iframe en función de su contenido. Después de hacer clic en cada página, se llama a un método que cambia el tamaño.cambio de tamaño de iframe con scrollheight en cromo/safari

En Chrome puedo hacer que el iframe sea más grande, pero no más pequeño. document.body.scrollHeight es siempre el mayor valor.

Así que si una página grande establece # iframe.height = '620px', y alguien hace clic en un enlace a la página con menos contenido scrollHeight se mantendrá en 620px en lugar de disminuir.

¿Cuál es la forma correcta de manejar esto en Chrome/Safari?

Respuesta

21

Antes de solicitar la altura del documento dentro del marco flotante, debe establecer el alto del objeto del marco flotante en "automático". Algo como esto:

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

Y ahora:

document.body.scrollHeight 

devuelve la altura real del documento.

+0

Brillante! ¡He estado peleando con esto por días! –

+2

Si alguien más se encuentra con esto, lo que lo solucionó fue configurar 'document.body.scrollHeight' para Firefox, y 'document.documentElement.scrollHeight' para Chrome y cualquier otra cosa ... Mi ejemplo usa postMessage para dominio cruzado '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 ('altura:' + document.documentElement.scrollHeight, e.origin); \t \t \t} ' – nitsuj

+1

Gracias por esta respuesta, he incluido en mi biblioteca iFrame https://github.com/davidjbradshaw/iframe-resizer –

9

¿Intentó usar document.documentElement.scrollHeight en su lugar?

+0

Esto. Este funcionó: D – chadkouse

Cuestiones relacionadas