Condition 1 : Comment transférer les données de la page principale A vers l'iframe B ?
De cette façon, la page principale doit transmettre les données à l'iframe B, puis l'iframe B effectuera un traitement spécifique après avoir obtenu les données.
Méthode de mise en œuvre
L'astuce de l'implémentation consiste à utiliser la valeur de hachage de l'objet de localisation pour transmettre les données de communication à travers celui-ci. Il suffit de définir le src de l'iframe B dans la page principale A et d'ajouter une chaîne #data après (les données sont les données que vous avez utilisées). voulez réussir), comme le montre la figure ci-dessous Afficher :
Ensuite, dans l'iframe B, vous pouvez obtenir les données ici instantanément via une méthode. En fait, une méthode couramment utilisée est :
1. Réglez la minuterie via la méthode setInterval dans l'iframe B et surveillez les changements dans location.href pour obtenir les informations de données ci-dessus.
2. L'iframe B peut ensuite effectuer le traitement logique correspondant sur la base de ces informations de données.
Exigence 2 : Comment l'iframe B transmet-elle les données à la page principale A ?
De cette façon, l'iframe B doit transmettre les données à la page principale, puis la page principale effectuera un traitement spécifique après avoir obtenu les données.
Méthode de mise en œuvre
L'astuce pour la mise en œuvre consiste à utiliser un proxy IframeC, qui est intégré dans l'iframe B et doit rester dans le même domaine que la page principale A. Nous pouvons ensuite l'utiliser pour utiliser pleinement le principe de mise en œuvre de la première méthode de communication ci-dessus pour transférer le données de l'iframe B Pour iframeC, la question suivante est de savoir comment laisser iframeC transmettre les données à la page principale A, comme le montre la figure ci-dessous :
Parce que iframeC et la page principale sont dans le même domaine, il devient beaucoup plus simple de transférer des données entre eux. Notre méthode ici consiste à utiliser un attribut window.top fréquemment utilisé (vous pouvez également utiliser window.parent.parent), qui renvoie un référence à l'objet fenêtre de niveau supérieur chargé dans le navigateur, afin que nous puissions utiliser directement la méthode dans la page principale A, hahaha, simple.
À ce stade, nous faisons une analyse simple et un résumé
Le principe et le plus gros inconvénient de cette implémentation est que le contenu de l'iframe doit être contrôlable par nous, mais au moins notre implémentation est basée sur les règles de sécurité du navigateur et ne compromet pas la sécurité de l'application elle-même.
Quelques détails à considérer lors de la mise en œuvre
Essayez de prendre en compte la facilité d'utilisation, l'évolutivité et la maintenabilité, telles que :
Laissez les applications tierces n'avoir qu'à charger un fichier de départ JS que nous fournissons pour utiliser facilement les différents outils que nous leur fournissons.
Nous organisons les différents outils ci-dessus sous forme de packages pour maximiser le chargement à la demande.
Le fichier de départ JS du premier élément fournit uniquement une implémentation de méthode de base et y intègre les boîtes à outils les plus couramment utilisées, telles que les outils hautement adaptatifs.
Grâce aux fichiers de départ, nous fournissons également des kits d'outils JS couramment utilisés à des applications tierces, et les kits d'outils spécifiés peuvent être utilisés directement à l'aide d'un mécanisme de chargement dynamique similaire au module YUI3.
Classer les données transmises par les applications tierces et les pages principales (appel automatique, vérification de connexion, données transmises, etc.)
Les données transférées utilisent le format JSON qui répond à des spécifications spécifiques et sont envoyées via un point de service unifié. La page principale fournit une interface de service unifiée pour analyser les données et appeler les méthodes correspondantes selon les spécifications.
Il existe également un problème de contrôle de version. Afin de minimiser l'impact sur les applications tierces, les versions de tous les fichiers JS ci-dessus adoptent une stratégie de compatibilité descendante. Les petites versions sont implémentées en utilisant le serveur pour définir le délai d'expiration du fichier. Cache SQUID à une fréquence spécifique. Les mises à jour des versions majeures sont modifiées manuellement en fonction des besoins de l'utilisateur.
Bien sûr, la solution ci-dessus n'est peut-être pas la solution optimale, mais j'espère simplement qu'elle pourra vous apporter de l'aide et des conseils. Nous améliorons également progressivement certaines de nos méthodes d'implémentation, telles que le contrôle de version. Nous avons également quelques problèmes à résoudre. résolu.
code spécifique
Code source de la page principale A
Copiez le code comme suit :
Code Js
/*Page principale A*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page principale A</title>
<script type="text/javascript">
fonction init(){
document.domain = 'bai.sohu.com';
alert('Je suis le frame principal, intégré à une application tierce IframeB, l'application va commencer à se charger ci-dessous');
var iframeTag = document.getElementById('frameB'),
iframeSrc = 'http://test.com/iframePage.html';
iframeTag.src = iframeSrc;
iframeTag.style.display = 'bloc';
} ;
rappel de fonction(h){
var iframeB = document.getElementById('frameB');
alert('IframeC appelle mon interface (cadre principal) et me transmet la hauteur d'IframeB. La valeur spécifique est : ' + h);
iframeB.style.height= h + 10 + 'px';
iframeB.src += '#'+ h
} ;
</script>
</tête>
<body onload="init();">
<p>Je suis le cadre de la page d'accueil et mon domaine est : bai.sohu.com</p>
<iframe id="frameB" style="display:none;"></iframe>
</corps>
</html>
Code source de l'iframeB (iframePage.html)
Copiez le code comme suit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<titre>iframeB</titre>
</tête>
<body onload="init();">
<p style="height:500px;">Je suis une application tierce et mon domaine est : test.com</p>
<iframe id="frameC" style="height:1px;width:1px;display:none;"></iframe>
</corps>
</html>
<script type="text/javascript">
fonction init(){
alert('Je suis une application tierce. Créons un canal de communication IframeC dans le même domaine que le frame principal, définissons son src et utilisons le signe # pour transmettre la valeur de hauteur');
var iframeTag = document.getElementById('frameC'),
iframeSrc = 'http://bai.sohu.com/iframePageC.html#',
pageHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
iframeTag.src = iframeSrc + pageHeight ;
iframeTag.style.display = 'bloc';
window.setTimeout(function(){
alert('La page principale définit le src de mon (IframeB) et me transmet la hauteur qu'elle reçoit via Hash (#) : ' + location.hash);
},2000);
} ;
</script>
Code source d'iframeC (iframePageC.html)
Copiez le code comme suit :
<script type="text/javascript">
document.domain = 'bai.sohu.com';
alert('J'ai (IframeC) reçu iframeB me transmettant la valeur de hauteur via le paramètre (#), j'appelle maintenant la méthode de la page principale pour définir la hauteur d'IframeB');
top.callback(window.location.href.split('#')[1]);
</script>