Este ejemplo de artículo describe el método de la página infantil de iframe incrustada y la comunicación JS de la página principal. Compártelo para su referencia. El análisis específico es el siguiente:
El método de comunicación entre la página y la página principal en el marco iframe obviamente es diferente dependiendo de si el atributo SRC en el iframe está vinculado al mismo dominio o enlace de dominio cruzado. El intercambio de datos y el acceso mutuo de elementos DOM en el mismo dominio son mucho más simples, mientras que el dominio cruzado requiere algunas formas inteligentes de lograr la comunicación.
1. Comunicación entre las páginas de padre e hijo bajo el mismo dominio
Página principal Parent.html:
Copie el código de la siguiente manera: <html>
<Evista>
<script type = "text/javaScript">
función dice () {
alerta ("Parent.html ------> Estoy en Parent.html");
}
función CallChild ()
{
//document.frames+ "myframe"font>.window.say() ;// solo se aplica al navegador IE
myframe.window.say ();
myframe.window.document.getElementById ("botón"). Value = "Cambié";
}
</script>
</ablo>
<Body>
<input type = button value = "callChild ()">
<iframe name = "myframe" src = "child.html"> </iframe>
</body>
</html>
Subpage Child.html:
Copie el código de la siguiente manera: <html>
<Evista>
<script type = "text/javaScript">
función dice ()
{
alerta ("Child.html ---> Estoy en Child.html");
}
función callparent () {
parent.say ();
parent.window.document.getElementsByName ("myframe") [0] .style.height = "100px";
}
</script>
</ablo>
<Body>
<input id = "botón" type = button value = "llamando a la función say () en parent.html" onClick = "callParent ()">
</body>
</html>
Llamada de método
Como se muestra en el ejemplo anterior, el método de llamar a la página infantil de la página principal puede ser utilizado por: franame.window.childmethod (); (Este método es compatible con varios navegadores)
El método de la página infantil que llama a la página principal: parent.window.parentmethod ();
Acceso al elemento DOM
Después de obtener el objeto de la ventana infantil de acuerdo con FrameName.Window, acceder al elemento DOM no es diferente de acceder al elemento DOM en la misma página. Puede copiar el código de la siguiente manera: document.getElementById (), document.getElementsByName () [index] Por ejemplo, copie el código de la siguiente manera: parent.window.document.getElementsByName ("myframe") [0];
myframe.window.document.getElementById ("Botón") Se pueden omitir Windows.
Cosas a tener en cuenta
Para asegurarse de que la operación se realice después de cargar el iframe, si no se carga el iframe, sin duda causará un error. Hay dos formas de determinar si el iframe ha sido cargado:
1. Use el evento de onar en iframe;
2. Use documento.readyState == "Complete" para juzgar
2. Método de comunicación de la página entre padres y hijos de dominio de dominio
Si el iframe enlaza una página externa, el método de comunicación bajo el mismo nombre de dominio no se puede utilizar debido al mecanismo de seguridad.
La página principal pasa los datos a las páginas infantiles
La técnica de implementación es utilizar el valor hash del objeto de ubicación y pasar los datos de comunicación a través de él. Solo necesitamos agregar una cadena #Data adicional después del SRC del iframe (los datos son los datos que desea aprobar), y luego obtener los datos de cierta manera en la página infantil. De hecho, un método común es:
1. Establezca el temporizador en la subpaga utilizando el método SetInterval para escuchar los cambios en la ubicación.
2. Entonces la subpágina puede realizar el procesamiento lógico correspondiente basado en esta información de datos.
La página del niño pasa datos a la página principal
La técnica de implementación es utilizar un proxy iframe C, que está integrado en la página del niño y debe permanecer en el mismo dominio que la página principal. Luego podemos pasar los datos de la página infantil a iframec a través de ella utilizándolo para utilizar completamente el principio de implementación del primer método de comunicación anterior. La siguiente pregunta es cómo dejar que iframec pase los datos a la página principal A. Debido a que iframec y la página principal están en el mismo dominio, se hace mucho más fácil pasar datos entre ellos, que es un problema de comunicación bajo el mismo nombre de dominio. Como se discutió anteriormente, aquí puede usar una propiedad de propiedad frecuente Window.top (también puede usar Window.Parent.Parent), que devuelve una referencia al objeto de ventana de nivel superior cargado en el navegador, para que podamos usar directamente el método en la página principal.
Espero que este artículo sea útil para la programación de JavaScript de todos.