Résumé des compétences d'interaction entre les pages parent et enfant javascript_compétences javascript

Frame est utilisé pour stocker des sous-pages, qui peuvent être soit iframe, soit frameset. L'objet window est un objet global et toutes les fonctions et objets de la page entrent dans sa portée.
1. Parent représente la fenêtre parent. Si la fenêtre parent a plusieurs niveaux d'imbrication, top représente la fenêtre parent de niveau supérieur.
self représente la fenêtre elle-même.

if(self==top){//}判断窗口是否处于顶级 
if(self==parent){}//也可以

2.1. La page parent accède aux éléments de la page enfant. L'idée est que les éléments de la sous-page sont tous dans son objet window.document. Il est facile de l'obtenir d'abord et d'en parler ensuite.
Il est préférable de définir l'attribut de nom du cadre, ce qui constitue l'opération la plus pratique. Comme

<iframe name="test" src="child.html"></iframe>

Si vous souhaitez récupérer l'élément avec l'identifiant 'menu' dans child.html, vous pouvez écrire comme ceci :

window.frames["test"].document.getElementById('menu'); 
//由于所有的函数都存放在window对象里面，可去掉开头的window： 
frames["test"].document.getElementById('menu'); 
//在浏览器中，帧的name属性被默认等同于子页面的window对象，因此可以进一步简写： 
test.document.getElementById('menu');

2.2 La page parent accède aux fonctions ou objets de la page enfant. Les fonctions et objets de la sous-page sont tous dans son objet fenêtre Comme ci-dessus. La clé est d'obtenir l'objet.

//假如child.html定义了showMesg函数，需要在父中调用，则这样写 
window.frames['test'].showMesg(); 
//简写形式 
test.showMesg(); 
//同理，对象也是如此访问 
alert(test.person);

2.3 Autres moyens d'obtenir des documents.
Utilisez d'abord 'document.getElementById()' ou 'document.getElementsByTagName()' pour obtenir le cadre en tant qu'élément sous le document, puis accédez à ses propriétés contentDocument/contentWindow (spécifiques à l'iframe et au frame). par ie7-. Le deuxième chrome n'est pas pris en charge.

<iframe id="testId" src="child.html"></iframe> 
//====== 
var doc=document.getElementById('testId'); 
//或者 
var doc=document.getElementsByTagName('iframe')[0]; 
然后 
var winOrdoc=doc.contentDocument||doc.contentWindow;//二选一 
if(winOrdoc.document)winOrdoc=winOrdoc.document; 
winOrdoc.getElementById('menu'); 
//如果需要window对象，则这样写： 
if(winOrdoc.defaultView)winOrdoc=winOrdoc.defaultView;

3.1 La sous-page accède aux éléments de la page parent. L'idée est la même que celle de la version 2.1, récupérez d'abord l'objet window.document de la fenêtre parent

parent.window.document.getElementById('parentMenu'); 
//简写 
parent.document.getElementById('parentMenu');

3.2, La page enfant accède à la fonction ou à l'objet de la page parent. L'idée est la même que celle de la version 2.2, récupérez d'abord l'objet window fenêtre parent.

parent.parentFunction();

Enfin, permettez-moi de mentionner la politique de même origine de js, c'est-à-dire que le code js situé sur le site Web A n'est pas autorisé à accéder au contenu situé sur le site Web B, même si le code provient du site Web B. Si le cadre est une page d'un autre site Web, alors lors de l'accès selon la méthode ci-dessus, le navigateur devrait afficher l'erreur : "Aucune autorisation".