¿Por qué tres charlas?
¿Por qué tres charlas? Una es porque este es un tema del que realmente se habla mucho, y la otra es porque el Maestro Tai escribió este artículo hace n años para hablar sobre la altura adaptativa del iframe . La razón por la que planteo esta pregunta nuevamente es porque de hecho me he encontrado con todos los aspectos de este problema en proyectos anteriores y es necesario resumirlo. Espero que esto te ayude, corrígeme si hay algún error.
La altura del mismo dominio y subpáginas no aumentará dinámicamente
Esta situación es la más simple. Simplemente obtenga la altura real de la subpágina directamente a través del script y modifique la altura del elemento iframe. Pero hay dos puntos que hay que tener en cuenta:
Si hay elementos absolutamente posicionados en la página o no hay elementos flotantes, la situación es un poco complicada. Diferentes navegadores tienen diferentes resultados de procesamiento, incluso los navegadores con kernel Webkit. Consulte esta demostración para obtener más detalles. Entonces, o detecta el navegador, usa Math.max para calcular un valor máximo o piensa en otra cosa.
La página contenida en el iframe puede ser muy grande y requerir un tiempo de carga prolongado. Al calcular la altura directamente, es probable que la página no se haya descargado y habrá problemas con el cálculo de la altura. Por lo tanto, es mejor calcular la altura en el evento de carga del iframe. También debe tenerse en cuenta aquí que el modelo de eventos de Microsoft obj.attachEvent debe usarse para vincular el evento de carga en IE. Otros navegadores también pueden usar directamente obj.onload = function(){}.
(función(){
var _reSetIframe = función(){
var marco = document.getElementById("frame_content_parent")
intentar {
var frameContent = frame.contentWindow.document,
altura del cuerpo = Math.max
(frameContent.body.scrollHeight,
frameContent.documentElement.scrollHeight);
si (alturadelcuerpo!=alturadelcuadro){
marco.altura = altura del cuerpo;
}
}
atrapar (ex) {
marco.altura = 1800;
}
}
si(frame.addEventListener){
marco.addEventListener
("cargar",función(){setInterval(_reSetIframe,200);},false);
}demás{
frame.attachEvent("onload",function(){setInterval(_reSetIframe,200);});
}
})();
En el mismo dominio, la altura de las subpáginas aumentará dinámicamente y el script puede fallar por completo.
En el segundo ejemplo, se tienen en cuenta los errores del script, pero si el script no se ejecuta en absoluto, el contenido del iframe no se mostrará porque la altura del iframe no es lo suficientemente alta. Por esta razón, generalmente establecemos una altura suficiente de antemano. Para facilitar el control frontal, creo que es más apropiado escribirlo en un archivo CSS. Cuando sea necesario modificarlo, simplemente cambie el CSS. Aquí configuro el selector {altura: 1800 px; Cabe señalar que los estilos escritos en la hoja de estilos no se pueden recuperar directamente usando node.style[property]. Para los modelos de Microsoft, se debe usar node.currentStyle[property] (digresión: el trágico modelo de IE no admite pseudo-CSS). clases), para el modelo W3C, use window.getComputedStyle(node,null)[property] para obtenerlo. Utilicé YUI directamente por conveniencia.
Hay otro problema aquí. Cuando se establece que la altura del iframe sea mayor que la altura de la página que contiene, cada navegador lo maneja de manera diferente. Por ejemplo, en Firefox, se debe calcular la altura del elemento del cuerpo y la altura del elemento html es igual a la altura del iframe. Sin embargo, cuando la página tiene un posicionamiento absoluto y elementos flotantes sin borrar, no se puede. obtenido a través del elemento del cuerpo Obviamente, el primer método Las desventajas del método son menores. Consulte esta demostración para obtener más detalles.