Otra idea inteligente de darse cuenta de la adaptabilidad de la altura de las ventanas de iframe

Autor：Eve Cole Fecha de actualización：2025-02-23 11:32:01

Hay una página index.html en Domaina, que anida una página otra.html en DomainB a través de un iframe

Dado que la página de HTML se muestra en el iframe y su contenido de página aumentará o disminuirá dinámicamente, la barra de desplazamiento del iframe debe eliminarse ahora

Debido a las limitaciones de la política del mismo origen de JavaScript, no se puede realizar la operación entre dominios, lo que dificulta el problema

Me he referido a la práctica en línea e introduje una página de agente, o un agente.html, que pertenece a Domaina

Luego, en otro.html en DomainB, use iframe para nid agente.html

Ok, ahora la situación es:

index.html anidando otros.html usando iframe

otro.htmlnest agent.html usando iframe

¡La razón por la cual la tercera página agente.html es cumplir con las reglas de la "política del mismo origen" y completar el paso de los parámetros bajo diferentes dominios!

Nuestro objetivo final es eliminar la barra de desplazamiento y asegurarse de que se muestre todo el contenido de la página integrado

1. Obtenga la altura real de la otra.

2. Establezca la altura en la propiedad SRC del iframe que incrustó

3. En agente.html, corte el valor de altura en el atributo SRC del iframe.

En el siguiente ejemplo, se usa un truco para evitar usar setInterval () para establecer continuamente la altura del iframe.

El método es adjuntar una marca de tiempo al SRC del iframe, de modo que el navegador vuelva a cargar el agente.html cada vez

Luego deje que la función js invokemethodinTopwindow () en agente.hml se ejecute

2 html en dominio

index.html

La copia del código es la siguiente:

#{extiende 'main.html' /}

#{Establecer título: 'Home' /}

<hr>

<Div style = "Color: Red; Font-Weight: Bold"> Adaptación de la ventana-Byte las limitaciones de las políticas homólogas, y al mismo tiempo use políticas homólogas para eliminar la barra de desplazamiento del iframe, ajuste dinámicamente la altura de la ventana de la ventana , para que pueda mostrar todo el contenido de la página anidada </div>

<!-iframe que requiere un ajuste de altura dinámica->

</div>

function reize (altura) {

// alerta ("cambiar de tamaño");

document.getElementsByName ("DomainB") [0] .Height = altura;

}

</script>

agente.html

La copia del código es la siguiente:

<! Doctype html>

<html>

<title> Insertar título aquí </title>

</ablo>

<Body>

¡Soy la página Proxy!

Window.Onload = InvokemethodIntopWindow;

function InvokemethodInTopWindow () {

// alerta ("llame a la función bajo el mismo dominio y restablezca la altura del iframe");

var domaina = document.parentwindow;

var realHeight = domaina.location.hash.split ("#") [1];

// Último paso: llame a la función de la ventana superior para restablecer la altura del iframe

parent.parent.resize (realHeight);

// alerta ("Realheight:"+realHeight);

//alert(Document.ParentWindow.name) ;///obtiene el nombre de la ventana donde se encuentra el contenedor Domaina

//error://alert(Document.ParentWindow.Parent.name);

//alert(document.parentwindow.parent.parent.name) ;// la ventana de nivel superior pertenece a Domaina, por lo que se puede acceder

}

// Después de establecer el atributo SRC del iframe con diferentes marcas de tiempo, no necesita usar setInterval ()

// setInterval ("InvokemethodInToPWindow ()", 100);

</script>

</body>

</html>

Otro.html en Domainb

La copia del código es la siguiente:

<! Doctype html>

<html>

<title> Insertar título aquí </title>

</ablo>

<!-página incrustada en el dominio a->

<botón tipo = "botón" onClick = "btnclick ()"> Switch Display </boton>