Explication détaillée des exemples de communication de page parent-enfant javascript_compétences javascript

L'exemple de cet article décrit la méthode d'implémentation de la communication JavaScript entre les pages parent-enfant. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Si une page avec le domaine www.abc.com contient une iframe avec une valeur d'attribut de nom childFrame et que le domaine de cette iframe est static.abc.com. Ensuite, vous pouvez définir le domaine de la page parent sur abc.com et le domaine de la page enfant sur abc.com, puis réaliser une communication entre la page parent et l'enfant (je suis un peu confus ici à propos des concepts de pages parent-enfant). et inter-domaines

Vous pouvez également obtenir un accès mutuel entre les pages parent et enfant sans utiliser la méthode ci-dessus.
La méthode est la suivante : utilisez window.frames[0] ou window.frames["childFrame"] sur la page parent. Ce qui est renvoyé est un objet Window, puis vous pouvez transmettre :

var childWindow = window.frames[0];
// 或者 window.frames["childFrame"] 或者直接childFrame 或者childFrame.window 
var childDoc = childWindow.contentDocument || childWindow.document; 

Utilisez childWindow pour accéder à la fonction qui exécute la définition de la sous-page, et utilisez childDoc pour accéder au nœud DOM de la sous-page.

Pour accéder à la page parent, la page enfant peut passer parent (objet Window). Si une page est déjà une page de niveau supérieur, parent==self retournera true :

if(parent != self) {
// 当前页面有父页面 
  // 调用父页面的函数 
  parent.parentFunc(); 
  var parentDoc = parent.contentDocument || parent.document; 
  // 访问父页面的DOM节点 
}

Page parent www.abc.com :

document.domain = 'abc.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://static.abc.com/';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
  var doc = ifr.contentDocument || ifr.contentWindow.document;
  // 在这里操纵子页面
  alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};

Sous-page www.static.abc.com :

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.