El método de comunicación es diferente dependiendo de si el atributo SRC en el iframe está vinculado al mismo dominio o enlace de dominio cruzado.
1. Comunicación entre las páginas de padre e hijo bajo el mismo dominio
Página principal Padre.html
La copia del código es la siguiente:
<html>
<Evista>
<script type = "text/javaScript">
función dice () {
alerta ("parent.html");
}
función callChild () {
myframe.window.say ();
myframe.window.document.getElementById ("botón"). valor = "final de llamada";
}
</script>
</ablo>
<Body>
<input id = "botón" type = "button" value = "llame a la función en child.html says ()" onClick = "callChild ()"/>
<iframe name = "myframe" src = "child.html"> </iframe>
</body>
</html>
niño.html
La copia del código es la siguiente:
<html>
<Evista>
<script type = "text/javaScript">
función dice () {
alerta ("Child.html");
}
función callparent () {
parent.say ();
parent.window.document.getElementById ("botón"). Value = "Call End";
}
</script>
</ablo>
<Body>
<input id = "button" type = "button" value = "llame a la función say () en parent.html" onClick = "callParent ()"/>
</body>
</html>
Llamada de método
La página principal llama al método de la página del niño: FrameName.window.childmethod ();
La página del niño llama al método de la página principal: parent.window.parentmethod ();
Acceso al elemento DOM
Después de obtener la ventana. Objeto Documento de la página, puede acceder al elemento DOM.
Cosas a tener en cuenta
Para asegurarse de que la operación se realice después de cargar el iframe, si el iframe aún no se ha cargado, comience a llamar a los métodos o variables dentro, se producirá un error. Hay dos formas de determinar si un iframe está cargando:
1. Utilice el evento de encendido 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 usar porque el mecanismo de seguridad no se usa.
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. Agregue una cadena de datos adicional después del SRC del iframe en la página principal, y luego, de alguna manera, puede obtener los datos aquí al instante, por ejemplo:
1. Establezca el temporizador en la subpaga a través del método SetInterval, escuche los cambios en la ubicación. HREF para obtener la información de datos anterior
2. Luego, la subpágina realiza 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 iframe proxy, que está integrado en la página del niño y debe permanecer en el mismo dominio que la página principal. Luego, a través de él, utiliza completamente el principio de implementación del primer método de comunicación anterior, pasa los datos de la página infantil al proxy iframe. Luego, dado que el proxy iframe y la página principal están en el mismo dominio, la página principal puede obtener estos datos utilizando el mismo dominio. Use Window.top o Window.Parent.Parent para obtener una referencia al objeto de ventana de nivel superior del navegador.