Red de conocimiento informático - Conocimiento de Internet de las cosas - ¿Cómo configurar la altura del iframe a una altura adaptable? ¿Se puede implementar en escenarios de aplicaciones entre dominios?

¿Cómo configurar la altura del iframe a una altura adaptable? ¿Se puede implementar en escenarios de aplicaciones entre dominios?

Primero veamos cómo configurarlo mediante un script.

función ChangeFrameHeight(id) {

var count = 1

(function() {

var frm = document.getElementById (id);

var subWeb = document.frames ?frames[id].document: frm.contentDocument;

if (subWeb ! = null) {

var altura = Math.max(subWeb.body.scrollHeight, subWeb.documentElement.scrollHeight);

frm.height = altura

}

if; (cuenta lt; 3) {

cuenta = cuenta 1;

ventana.setTimeout(argumentos.callee, 2000

}

<); p> })();

}

Supongamos que la página secundaria del iframe y la página principal están en el mismo dominio y que este script puede ajustar dinámicamente la altura del iframe para un determinado dominio. identificación. Para evitar que la página principal termine de cargarse antes que la página secundaria, la función se volverá a ejecutar cada 2 segundos, 3 veces cada vez. En casos extremos, la página secundaria se cargará más lentamente que la página principal, por lo que la cantidad de ejecuciones y el tiempo se pueden ajustar adecuadamente.

lt; iframe frameborder="0" width="450" ​​​​marginheight="0" marginwidth="0" scrolling="no" id="frm1" name="frm1" src=" abc. html" onload="ChangeFrameHeight('frm1')"gt;lt;/iframegt;

Si encuentra problemas entre dominios con subpáginas, puede usar postMessage de HTML5 para lograrlo, pero solo si la subpágina necesita enviar información activamente a la página principal. Las siguientes son partes de subpágina:

lt;!DOCTYPE htmlgt;

lt;headgt;

lt;/headgt;

lt ;body onload="parent.postMessage(document.body .scrollHeight, '');"gt;

lt;h3gt;¿Tienes la publicación?

lt;/h3gt;

p>

lt;pgt;Mucho contenido aquí se colocará en un iframe.

lt;script type="text/javascript"gt;

función resizeCrossDomainIframe(id, other_domain) {

var iframe = document.origin ==! other_domain) return; // solo acepta mensajes del dominio especificado

if (isNaN(event.data)) return; // solo acepta algo que pueda analizarse como un número

var height = parseInt(event.data) 32; //Agrega algo de altura adicional para evitar las barras de desplazamiento

iframe.height = height "px";

}, false);

}

lt;/scriptgt;

lt;iframe src='abc.html' id="frm1" onload="resizeCrossDomainIframe('frm1',''); "gt;

lt;/iframegt;

Para obtener más información sobre cómo utilizar el método postMessage() de HTML5, puede consultar este artículo: http://dev.w3. org/html5/postmsg/#web-messaging

Pero en la mayoría de los casos. En la mayoría de los casos, la página secundaria a la que se hace referencia en el iframe no está en el mismo dominio que la página principal, por lo que es posible que no podamos realizar ninguna operación en la página secundaria o que la página secundaria no proporcione mensajes de documentos Corss. funcionalidad en absoluto. En este caso, no podemos obtener ninguna información de la subpágina mediante el método postMessage(). Como no puede interactuar con la página secundaria, no puede conocer el objeto del documento de la página secundaria y no puede ajustar el atributo de altura del iframe principal en función de la altura real de la página secundaria.

No existe otra forma práctica de resolver el problema anterior. De forma predeterminada, puede especificar una altura relativamente grande para el iframe, de modo que, suponiendo que el contenido de la subpágina referenciada no exceda ese rango, básicamente no habrá problemas con la visualización del contenido, excepto dejar algún espacio en blanco en la página.