La différence entre window.parent et window.opener JavaScript appelle la méthode de la fenêtre principale
1 : window.parent est un exemple de page iframe appelant l’objet page parent :
un.html
Code HTML<html>
<head><title>Page parent</title></head>
<corps>
<nom du formulaire="form1" id="form1">
<input type="text" name="username" id="username"/>
</form>
<iframe src="b.html" width=100%></iframe>
</corps>
</html>
Si nous devons attribuer une valeur à la zone de texte du nom d'utilisateur dans a.htm dans b.htm, tout comme de nombreuses fonctions de téléchargement, la page de la fonction de téléchargement se trouve dans Ifrmae. Une fois le téléchargement réussi, nous mettons le chemin téléchargé dans la zone de texte. de la page parent.
Le code HTML
doit être écrit en b.html.
<script type="text/javascript">
var _parentWin = window.parent;
_parentWin.form1.username.value = "xxxx" ;
</script>
Adresse de l'instance : http://www.cnspry.cn/blog/attachments/window.parent instance/a.html
Code source :
1.a.html
Code HTML
<html>
<tête>
<title>Page principale</title>
<script>
/** Variables de test ajoutées pour tester la fenêtre enfant IFrame appelant les variables globales de la fenêtre parent*/
var parentVairous = "Une variable de test ajoutée pour tester la fenêtre enfant IFrame appelant la variable globale de la fenêtre parent";
fonction parentInvokeIFrame()
{
var iframeTest = document.frames["iframeTest"]; //L'utilisation de document.getElementById("iframeTest");
alerte(iframeTest.document.body.innerHTML);
alerte(iframeTest.iFrameVair);
}
</script>
</tête>
<corps>
<nom du formulaire="form1" id="form1">
<input type="text" name="username" id="username"/>
<input type = "button" value = "La fenêtre parent appelle le contenu de la fenêtre enfant IFrame" onclick = 'parentInvokeIFrame()'/>
</form>
<iframe src="b.html" width = '100%' id = 'iframeTest'></iframe>
</corps>
</html>
1.b.html
Code HTML
<html>
<tête>
<titre></titre>
<script type="text/javascript">
/** La fonction globale de la fenêtre enfant ajoutée pour tester le formulaire parent appelant la fonction globale du formulaire enfant IFrame*/
var iFrameVair = "Tester le formulaire parent pour appeler la fonction globale du formulaire enfant IFrame";
fonctionUpdateParent()
{
var _parentWin = window.parent;
_parentWin.form1.username.value = "xxxx" ;
}
fonction enfantInvokeParent()
{
var parentVairous = window.parent.window.parentVairous;
alert(parentVairous);
}
</script>
</tête>
<corps>
<nom du formulaire="form1" id="form1">
<p> </p>
<p align="center">
<type d'entrée = "bouton"
nom = "bouton"
identifiant = "bouton"
value = "Mettre à jour le contenu UserName de la page principale"
onclick = "UpdateParent()">
<type d'entrée = "bouton"
nom = "bouton2"
identifiant = "bouton2"
value = "Tester la fenêtre enfant IFrame pour appeler la variable globale de la fenêtre parent"
onclick = "childInvokeParent();"/>
</p>
<p> </p>
</form>
</corps>
</html>
ps : Il ne peut pas être obtenu sur plusieurs domaines. Par exemple, si le src de l'iframe est « http://www.xxx.ccc/ », il ne peut pas être obtenu.
2 : window.opener est la page enfant ouverte par window.open qui appelle l'adresse de l'instance de l'objet de la page parent : http://www.cnspry.cn/blog/attachments/window.opener instance/a.html
Code source :
2.a.html
Code HTML
<html>
<tête>
<title>Page principale</title>
<script type="text/javascript">
/** Variables de test ajoutées pour tester la fenêtre enfant IFrame appelant les variables globales de la fenêtre parent*/
var parentVairous = "Une variable de test ajoutée pour tester la fenêtre enfant IFrame appelant la variable globale de la fenêtre parent";
/**
* Parce qu'il est différent d'IFrame (IFrame a un identifiant, window.open() a des modes différents de la fenêtre parent-enfant d'IFrame),
* Ainsi, lorsqu'une nouvelle fenêtre est ouverte via la méthode window.open(), il doit y avoir un objet de la nouvelle fenêtre
* Bien sûr, la sous-fenêtre doit d'abord apparaître avant que les variables de la sous-fenêtre puissent être appelées, sinon une exception sera levée
*/
varOpenWindow;
fonction openSubWin()
{
OpenWindow = window.open('b.html', 'newwindow', 'hauteur=1024, largeur=1300, haut=0, gauche=0, barre d'outils=non, barre de menu=oui, barres de défilement=oui, resdimensionnable=oui, emplacement =non, statut=non');
}
fonction parentInvokeChild()
{
if(OpenWindow)//Bien sûr, la sous-fenêtre doit d'abord apparaître avant que les variables de la sous-fenêtre puissent être appelées, sinon une exception sera levée
{
alerte(OpenWindow.iFrameVair);
}
}
</script>
</tête>
<corps>
<nom du formulaire="form1" id="form1">
<input type="text" name="username" id="username"/>
<input type="button" value="Sous-page contextuelle" onclick = "openSubWin()">
<input type="button" value="Test des variables globales d'appel dans la fenêtre contextuelle" onclick = "parentInvokeChild()">
</form>
</corps>
</html>
2.b.html
Code HTML
<html>
<tête>
<title>Sous-page</title>
<script type="text/javascript">
/** La fonction globale de la fenêtre enfant ajoutée pour tester le formulaire parent appelant la fonction globale du formulaire enfant IFrame*/
var iFrameVair = "Tester le formulaire parent pour appeler la fonction globale du formulaire enfant IFrame";
fonctionUpdateParent()
{
var _parentWin = window.opener;
_parentWin.form1.username.value = "xxxx" ;
}
fonction enfantInvokeParent()
{
var parentVairous = window.opener.window.parentVairous;
alert(parentVairous);
}
</script>
</tête>
<corps>
<nom du formulaire="form1" id="form1">
<p> </p>
<p align="center">
<type d'entrée="bouton"
onclick = "Mise à jourParent();"
nom="bouton"
identifiant="bouton"
value="Mettre à jour le contenu du nom d'utilisateur de la page principale">
<type d'entrée = "bouton"
nom = "bouton2"
identifiant = "bouton2"
value = "Tester la fenêtre enfant IFrame pour appeler la variable globale de la fenêtre parent"
onclick = "childInvokeParent();"/>
</p>
<p> </p>
</form>
</corps>
Après avoir été rappelé par hanjs, il est vraiment important de noter que la fenêtre enfant de la fenêtre modale ne peut modifier aucun contenu dans la page de la fenêtre parent.
Par exemple, modifiez : OpenWindow = window.open('b.html', 'newwindow', 'height=1024, width=1300, top=0, left=0, toolbar=no, menubar=yes, scrollbars=yes, redimensionnable = oui, emplacement = non, statut = non');
Pour : OpenWindow = window.showModalDialog("b.html",'newwindow',"dialogHeight:100px,center:yes,resizing:no,status:no");
Lorsque vous souhaitez modifier le contenu de la fenêtre parent dans la fenêtre enfant, une erreur apparaîtra indiquant que "XX" est vide ou n'est pas un objet, et "XX" est ici le contenu de la fenêtre parent que vous souhaitez modifier.