Requisito 1: ¿Cómo transferir datos de la página principal A al iframe B?
De esta manera, la página principal debe pasar datos al iframe B, y luego el iframe B realizará un procesamiento específico después de obtener los datos.
Método de implementación
El truco para lograr esto es usar el valor hash del objeto de ubicación para pasar datos de comunicación a través de él. Solo necesitamos configurar el src del iframe B en la página principal A y agregar una cadena #data después (los datos son los datos). desea aprobar), como se muestra en la siguiente figura Mostrar:
Luego, en el iframe B, puede obtener los datos aquí instantáneamente a través de algún método. De hecho, un método comúnmente utilizado es:
1. Configure el temporizador mediante el método setInterval en el iframe B y supervise los cambios en location.href para obtener la información de datos anterior.
2. Luego, el iframe B puede realizar el procesamiento lógico correspondiente en función de esta información de datos.
Requisito 2: ¿Cómo pasa el iframe B datos a la página principal A?
De esta manera, el iframe B necesita pasar datos a la página principal, y luego la página principal realizará un procesamiento específico después de obtener los datos.
Método de implementación
El truco de implementación consiste en utilizar un IframeC proxy, que está integrado en el iframe B y debe permanecer en el mismo dominio que la página principal A. Luego podemos usarlo para utilizar completamente el principio de implementación del primer método de comunicación anterior para transferir el datos de iframe B Para iframeC, la siguiente pregunta es cómo permitir que iframeC pase los datos a la página principal A, como se muestra en la siguiente figura:
Debido a que iframeC y la página principal están en el mismo dominio, resulta mucho más sencillo transferir datos entre ellos. Nuestro método aquí es usar un atributo de uso frecuente window.top (también puede usar window.parent.parent), que devuelve un. 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 A, jajaja, simple.
Llegados a este punto, hacemos un análisis y resumen sencillo.
La premisa y la mayor desventaja de esta implementación es que el contenido del iframe debe ser controlable por nosotros, pero al menos nuestra implementación se basa en las reglas de seguridad del navegador y no socava la seguridad de la aplicación en sí.
Algunos detalles a considerar al implementar
Intente tener en cuenta la facilidad de uso, la escalabilidad y la mantenibilidad, como por ejemplo:
Deje que las aplicaciones de terceros solo necesiten cargar un archivo semilla JS que proporcionamos para utilizar fácilmente las diversas herramientas que les brindamos.
Organizamos las diversas herramientas anteriores en forma de paquetes para maximizar la carga bajo demanda.
El archivo semilla JS en el primer elemento solo proporciona la implementación del método básico y contiene los kits de herramientas más utilizados, como los altamente adaptables.
A través de archivos semilla, también proporcionamos algunos kits de herramientas JS de uso común para aplicaciones de terceros, y los kits de herramientas especificados se pueden usar directamente mediante un mecanismo de carga dinámica similar al módulo YUI3.
Clasificar los datos pasados por aplicaciones de terceros y páginas principales (autollamada, verificación de inicio de sesión, datos pasados, etc.)
Los datos transferidos utilizan el formato JSON que cumple con especificaciones específicas y se envían a través de un punto de servicio unificado. La página principal proporciona una interfaz de servicio unificada para analizar los datos y llamar a los métodos correspondientes de acuerdo con las especificaciones.
También está la cuestión del control de versiones. Para minimizar el impacto en las aplicaciones de terceros, las versiones de todos los archivos JS anteriores adoptan una estrategia de compatibilidad con versiones anteriores que se implementan utilizando el servidor para establecer el tiempo de caducidad. La caché de SQUID con una frecuencia específica. Las actualizaciones de las versiones principales se cambian manualmente según las necesidades del usuario.
Por supuesto, es posible que lo anterior no sea la solución óptima, pero espero que pueda brindarle ayuda y orientación. También estamos mejorando gradualmente algunos de nuestros métodos de implementación, como el control de versiones. También tenemos algunos problemas que deben resolverse. .
código específico
Código fuente de la página principal A
Copie el código de código de la siguiente manera:
código js
/*Página principal A*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8" />
<title>Página principal A</title>
<tipo de script="texto/javascript">
función inicio(){
documento.dominio = 'bai.sohu.com';
alert('Soy el marco principal, integrado con una aplicación de terceros IframeB, la aplicación comenzará a cargarse a continuación');
var iframeTag = document.getElementById('frameB'),
iframeSrc = 'http://test.com/iframePage.html';
iframeTag.src = iframeSrc;
iframeTag.style.display = 'bloque';
};
devolución de llamada de función (h) {
var iframeB = document.getElementById('frameB');
alert('IframeC llama a mi interfaz (frame principal) y me pasa la altura de IframeB. El valor específico es: ' + h);
iframeB.estilo.altura= h + 10 + 'px';
iframeB.src += '#'+ h
};
</script>
</cabeza>
<cuerpo onload="init();">
<p>Soy el marco de la página de inicio y mi dominio es: bai.sohu.com</p>
<iframe id="frameB" style="display:none;"></iframe>
</cuerpo>
</html>
Código fuente de iframeB (iframePage.html)
Copie el código de código de la siguiente manera:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8" />
<título>iframeB</título>
</cabeza>
<cuerpo onload="init();">
<p style="height:500px;">Soy una aplicación de terceros y mi dominio es: test.com</p>
<iframe id="frameC" style="alto:1px;ancho:1px;display:none;"></iframe>
</cuerpo>
</html>
<tipo de script="texto/javascript">
función inicio(){
alert('Soy una aplicación de terceros. Creemos un canal de comunicación IframeC en el mismo dominio que el marco principal, configuremos su src y usemos el signo # para pasar el valor de altura');
var iframeTag = document.getElementById('frameC'),
iframeSrc = 'http://bai.sohu.com/iframePageC.html#',
altura de la página = documento.documentElement.scrollHeight || documento.body.scrollHeight;
iframeTag.src = iframeSrc + alturadepágina;
iframeTag.style.display = 'bloque';
ventana.setTimeout(función(){
alert('La página principal establece el src de mi (IframeB) y me pasa la altura que recibe a través de Hash(#): ' + ubicación.hash);
},2000);
};
</script>
Código fuente de iframeC (iframePageC.html)
Copie el código de código de la siguiente manera:
<tipo de script="texto/javascript">
documento.dominio = 'bai.sohu.com';
alert('Yo (IframeC) recibí iframeB pasándome el valor de altura a través del parámetro (#), ahora llamo al método de la página principal para establecer la altura de IframeB');
top.callback(window.location.href.split('#')[1]);
</script>