Método de implementación adaptativa de altura de la ventana de iframe

Autor：Eve Cole Fecha de actualización：2025-02-22 14:16:01

Hay una página en Domaina index.html, anidada con una otra.html en una página en Domainb a través de iframe

Porque la otra página HTML se muestra en iframe, y el contenido de la página aumentará o disminuirá dinámicamente, ahora la barra de rodadura de iframe debe eliminarse

Debido a las limitaciones de las estrategias homólogas de JavaScript, las operaciones de dominio cruzado no se pueden realizar, lo que dificulta el problema

Consulte el enfoque de Internet, introduzca una página de agencia o el agente.html, que pertenece a Domaina

Luego, en el otro.html en Domainb, luego use iframe para agente anidado.html para anidados

Bien, este es el caso ahora:

Index.html usa iframe anidados otros.html

Otro.html usa iframe nesting agente.html

¡La razón para introducir la tercera página agente.html es cumplir con las reglas de "estrategia homogénea" y completar la transferencia de parámetros bajo diferentes dominios!

Nuestro propósito final es eliminar la barra de rodadura y garantizar que se muestren todo el contenido de la página incrustada.

1. La altura real de la altitud real de otra.

2. Establezca la altura en la propiedad SRC del iframe en su incrustado

3. Interprenda el valor de altura en el atributo SRC del iframe en agente.html

En el siguiente ejemplo, se utiliza una técnica para evitar usar setInterval () para establecer constantemente la altura de iframe

El método es agregar una marca de tiempo en el SRC de iframe, lo que permite que el navegador vuelva a cargar el agente.html cada vez

Luego deje que la función JS en agente.hml InvokemethodInToPWindow () se ejecute

2 html en dominio

index.html

Copiar código del código de la siguiente manera:

#{Extiende 'main.html' /}

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

<hr>

<Div style = "Color: Red; Font-Weight: Bold"> 窗口自适应 --- 绕开同源策略的限制，同时又利用同源策略，去掉 iframe 的滚动条，动态调整窗口的高度让Puede mostrar todo el contenido de la página anidada </div>

<!-Debes ajustar dinámicamente la altura de iframe->

</div>

Function reize (altura) {

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

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

}

</script>

agente.html

Copiar código del código de la siguiente manera:

<html>

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

</ablo>

<Body>

¡Soy una página proxy!

Window.Onload = InvokemethodIntopWindow;

function InvokemethodInToPWindow () {) {

// alerta ("llame a la función en el mismo dominio, restablezca la altura de iframe");

var domain = document.parentwindow;

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

// Último paso: llame a la función de la ventana de la capa superior y reinicie la altura de iframe

Parent.parent.resize (realHeight);

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

// alerta (document.parentwindow.name); // Obtenga el nombre de la ventana donde se encuentra el contenedor Domaina

// Error: // alerta (document.parentwindow.parent.name);

// alerta (document.parentwindow.parent.parent.name); // La capa superior de la ventana pertenece a Domaina, para que pueda visitarla

}

// Después de configurar el atributo SRC de iframe con diferentes marcas de tiempo, no es necesario usar setInterval ()

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

</script>

</body>

</html>

Otro.html en Domainb

Copiar código del código de la siguiente manera:

<html>

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

</ablo>

<!-página incrustada en un dominio->

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

En JavaScript, hay un límite de seguridad muy importante, llamado "política del mismo origen".

Esta estrategia ha realizado restricciones importantes en el contenido de la página a la que el código JavaScript puede acceder, es decir, JavaScript solo puede acceder al contenido del documento que contiene sus documentos en el mismo dominio.