Tutorial de habilidades de producción de la página web: altura adaptativa de iframe

Autor：Eve Cole Fecha de actualización：2025-04-21 07:48:02

Introducción al artículo de Wulin.com (www.vevb.com): Alguien puede no haber encontrado este problema todavía. Primero explicemos cuál es la altura adaptativa. La llamada altura adaptativa de iframe significa que, en base a la belleza de la interfaz y la interacción, el borde y la barra de desplazamiento del Iframe están ocultos, lo que hace que sea imposible ver que es un iframe. Si el iframe siempre llama a la misma página de altura fija, solo necesitamos escribir la altura de iframe hasta la muerte. Y

Busque la altura adaptativa de iframe a través de Google, con más de 5W resultados, busque la altura adaptativa de la altura de iframe, con más de 2W resultados.

Leí las docenas de artículos en los artículos anteriores y excavé una gran cantidad de reimpresiones. Hay tres o cinco artículos originales. En estos artículos originales, básicamente solo hablan sobre cómo adaptarse a las cosas estáticas, pero no consideran cómo hacer sincronización dinámica después de que JS opera DOM. Además, en términos de compatibilidad, la investigación también ha sido incompleta.

Espero hacer una investigación en profundidad en estos dos aspectos.

Tal vez alguien aún no haya entrado en contacto con este problema. Explicemos primero lo que es la altura adaptativa. La llamada altura adaptativa de iframe significa que, en base a la belleza de la interfaz y la interacción, el borde y la barra de desplazamiento del Iframe están ocultos, lo que hace que sea imposible ver que es un iframe. Si el iframe siempre llama a la misma página de altura fija, solo necesitamos escribir la altura de iframe hasta la muerte. Si el iframe desea cambiar de página, o la página incluida debe realizar operaciones dinámicas DOM, el programa debe sincronizar la altura de iframe y la altura real de la página incluida.

Por cierto, si tiene que usar el iframe, causará demasiados problemas para el desarrollo frontal.

Hay aproximadamente dos prácticas tradicionales:

Método 1: Después de que cada página incluida se haya cargado cargando su propio contenido, ejecute JS para obtener la altura de esta página y luego sincronice la altura de iframe de la página principal.

Método 2: Ejecute JS en el evento de encendido de la página principal iframe, obtenga el contenido de altura de la página incluida y luego sincronice la altura.

Desde la perspectiva del mantenimiento del código, el método dos es mejor que el método uno, porque el método uno, cada página incluida debe introducir una pieza del mismo código para hacer esto, y se han creado muchas copias.

Ambos métodos solo tratan con cosas tranquilas, es decir, solo se ejecutan cuando el contenido está cargado. Si JS opera los cambios de altura causados por el DOM, no es muy conveniente.

Si realiza un intervalo en la ventana principal, obtenga constantemente la altura de la página incluida y luego hace sincronización, ¿es conveniente y resuelve el problema de que JS opere el DOM? La respuesta es sí.

Página de demostración: página principal iFrame_a.html, que contiene páginas iframe_b.htm e iframe_c.html

Ejemplo de código de página principal:

función reinitiframe () {

var iframe = document.getElementById (frame_content);

intentar{

iframe.height = iframe.contentwindow.document.documentelement.scrollheight;

} catch (ex) {}

}

Window.SetInterval (Reinitiframe (), 200);

</script> ¿Habrá algún problema con la eficiencia?

Hice la prueba y abrí 5 ventanas (IE6, IE7, FF, Opera, Safari) para ejecutar este código, que no tendrá ningún impacto en la CPU, e incluso se ajustará a 2 ms, sin ningún impacto (básicamente mantenido a 0% de ocupación).

Hablemos sobre los problemas de compatibilidad de cada navegador. Cómo llegar a la altura correcta. Vale la pena comparar principalmente los dos cuerpos. Tenga en cuenta que este artículo usa este doctype. Los diferentes doctypes no deben afectar el resultado, pero si su página no declara Doctype, agregue uno primero.

<! Doctype html público -// w3c // dtd html 4.01 // en> Agregar el siguiente código de prueba a la página principal para generar estos dos valores, ejemplo de código:

<div> <boton> Verifique la altura </boton> </div> <script type = text/javaScript>

función checkHeight () {

var iframe = document.getElementById (frame_content);

var bheight = iframe.contentwindow.document.body.scrollheight;

var dheight = iframe.contentwindow.document.documentelement.scrollheight;

alerta (bheight: + bheight +, dheight: + dheight);

}

</script> se carga y se puede cambiar una capa absolutamente posicionada para cambiar la altura de la página dinámicamente. Si la capa se amplía, la altura de la página será compatible. Ejemplo de código:

<div> <boton> Toggle Overlay </boton>

</div>

</div>

función toggleOverlay () {

var overlay = document.getElementById ('superpuesto');

Overlay.style.display = (Overlay.style.display == 'Ninguno')? 'Bloque': 'Ninguno';

}

</script> El siguiente enumera los valores de prueba del código anterior en cada navegador:

(bheight = body.scrollheight, dheight = documentElement.scrollHeight, rojo = valor de error, verde = valor correcto)

/ La capa está oculta cuando la capa se expande

Bheight dheight bheight dheight

IE6 184 184 184 303

IE7 184 184 184 303

FF 184 184 184 303

Ópera 181 181 300 300

Safari 184 184 303 184

Ignoremos el problema de que Opera es 3 píxeles menos que otros ... Se puede ver que si no hay posicionamiento absoluto, los dos valores son iguales, y no importa cuál tome.

Pero si lo hay, entonces el rendimiento de cada navegador es diferente, y es incorrecto tomar cualquier valor solo. Pero se puede encontrar una regla, es decir, tomar dos valores máximos y ser compatible con cada navegador. Por lo tanto, nuestro código de página principal debe transformarse en esto:

function reinitiframe () {var iframe = document.getElementById (frame_content);

intentar{

var bheight = iframe.contentwindow.document.body.scrollheight;

var dheight = iframe.contentwindow.document.documentelement.scrollheight;

var altura = math.max (bheight, dheight);

iframe.height = altura;

} catch (ex) {}

}

Window.SetInterval (Reinitiframe (), 200); De esta manera, el problema de compatibilidad se resuelve básicamente. Por cierto, la capa absolutamente posicionada no solo afecta el valor, el flotador también causará la diferencia entre los dos valores.

Si demuestra la demostración, encontrará que en otros navegadores, excepto IE, cuando la capa se expande y luego oculta, el valor de altura obtenido todavía se mantiene a la altura expandida de 303, en lugar del verdadero valor oculto 184, lo que significa que no puede retroceder después de crecer más alto. Este fenómeno también puede ocurrir al cambiar entre diferentes páginas incluidas. Al cambiar de una página alta a una página baja, la altura obtenida sigue siendo el mismo valor alto.

Se puede resumir como: cuando la altura de la forma de iframe es más alta que la altura real del documento, la altura se toma como la altura de la forma, y cuando la altura de la forma es más baja que la altura real del documento, la altura real del documento se toma como la altura real del documento. Por lo tanto, es necesario encontrar una manera de establecer la altura en un valor más bajo que el documento real antes de sincronizarlo. Por lo tanto, agregue onload = this.Height = 100 ″ al iframe, para que la página sea lo suficientemente corta al cargar, y luego sincronice a la misma altura.

Este valor se determina en las aplicaciones reales y es lo suficientemente corto pero no demasiado corto, de lo contrario habrá parpadeos obvios en los navegadores como FF. Cuando se opera el DOM, la página principal no se puede monitorear, por lo que la altura puede reducirse después de que se opere el DOM.

En uno de mis proyectos reales, no hice esto en términos de sopesar los costos y los beneficios, porque tengo que insertar este código en cada función DOM, que es demasiado costosa y, de hecho, no es tan fatal encoger la capa o no encogerlo. Incluso en la demostración, esto no se hizo. Si el lector tiene una mejor manera, hágamelo saber.

Aquí está el código para la página principal final:

función reinitiframe () {

var iframe = document.getElementById (frame_content);

intentar{

var bheight = iframe.contentwindow.document.body.scrollheight;

var dheight = iframe.contentwindow.document.documentelement.scrollheight;

var altura = math.max (bheight, dheight);

iframe.height = altura;

} catch (ex) {}

}

Window.SetInterval (Reinitiframe (), 200);

</script>