Cet exemple d'article décrit la méthode de la page IFRAME IFRAME intégrée et de la communication JS Page Parent. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
La méthode de communication entre la page et la page principale dans le cadre IFRAME est évidemment différente selon que l'attribut SRC dans l'IFRAME est lié au même domaine ou à la même liaison dans le domaine. L'échange de données et l'accès mutuel DOM dans le même domaine sont beaucoup plus simples, tandis que le domaine croisé nécessite des moyens intelligents pour réaliser la communication.
1. Communication entre le père et les pages de fils dans le même domaine
Parent Page Parent.html:
Copiez le code comme suit: <html>
<adal>
<script type = "text / javascript">
fonction dit () {
alert ("parent.html ------> Je suis sur parent.html");
}
fonction callchild ()
{
//Document.frames@myframe"
myFrame.window.say ();
MyFrame.Window.Document.getElementById ("Button"). Value = "J'ai changé";
}
</cript>
</ head>
<body>
<input type = Button Value = "callchild ()">
<iframe name = "myFrame" src = "child.html"> </ iframe>
</docy>
</html>
Sous-page child.html:
Copiez le code comme suit: <html>
<adal>
<script type = "text / javascript">
fonction dit ()
{
alert ("child.html ---> je suis sur child.html");
}
fonction callparent () {
parent.say ();
parent.window.Document.getElementsByName ("MyFrame") [0] .style.Height = "100px";
}
</cript>
</ head>
<body>
<entrée id = "bouton" type = Button Value = "Appeler la fonction Say () dans parent.html" onclick = "callparent ()">
</docy>
</html>
Appel de méthode
Comme le montre l'exemple ci-dessus, la méthode d'appel de la page enfant de la page parent peut être utilisée par: FrameName.window.childMethod (); (Cette méthode est compatible avec divers navigateurs)
La méthode de la page enfant appelant la page parent: parent.window.parentMethod ();
Accès à l'élément DOM
Après avoir obtenu l'objet de fenêtre enfant en fonction de FrameName.Window, l'accès à l'élément DOM n'est pas différent d'accès à l'élément DOM dans la même page. Vous pouvez copier le code comme suit: document.getElementById (), document.getElementsByName () [index] Par exemple, copiez le code comme suit: parent.window.document.getElementsByName ("MyFrame") [0];
MyFrame.Window.Document.getElementById ("Button") Les fenêtres peuvent être omises.
Choses à noter
Pour s'assurer que l'opération est effectuée après le chargement de l'IFRAME, si l'IFRAME n'est pas chargé, il entraînera sans aucun doute une erreur. Il existe deux façons de déterminer si le nom d'IFRAM a été chargé:
1. Utilisez l'événement Onload sur iframe;
2. Utilisez le document.readystate == "Complete" pour juger
2. Méthode de communication de la page parent-fils inter-domaine
Si l'IFRAME relie une page externe, la méthode de communication sous le même nom de domaine ne peut pas être utilisée en raison du mécanisme de sécurité.
La page parent transmet des données aux pages enfants
La technique de mise en œuvre consiste à utiliser la valeur de hachage de l'objet de localisation et à passer les données de communication via l'informatique. Nous n'avons qu'à ajouter une chaîne #DATA supplémentaire après le SRC de l'IFRAME (les données sont les données que vous souhaitez passer), puis obtenez les données d'une certaine manière dans la page enfant. En fait, une méthode courante est:
1. Définissez la minuterie dans la sous-page en utilisant la méthode SetInterval pour écouter les modifications de l'emplacement.href pour obtenir les informations de données ci-dessus
2. Ensuite, le sous-page peut effectuer un traitement logique correspondant en fonction de ces informations de données.
La page de l'enfant transmet des données à la page parent
La technique d'implémentation consiste à utiliser un proxy iframe C, qui est intégré dans la page enfant et doit rester dans le même domaine que la page parent. Ensuite, nous pouvons transmettre les données de la page Child à Iframec via elle en l'utilisant pour utiliser pleinement le principe de mise en œuvre de la première méthode de communication ci-dessus. La question suivante est de savoir comment laisser Iframec passer les données à la page principale A. Parce que Iframec et la page principale sont dans le même domaine, il devient beaucoup plus facile de transmettre des données entre eux, ce qui est un problème de communication sous le même nom de domaine. Comme discuté précédemment, vous pouvez ici utiliser une Window.Top de propriété fréquemment utilisée (peut également utiliser Window.Parent.parent), qui renvoie une référence à l'objet de fenêtre de niveau supérieur chargé dans le navigateur, afin que nous puissions utiliser directement la méthode dans la page parent.
J'espère que cet article sera utile à la programmation JavaScript de tous.