js communication entre la sous-page iframe et la page parent dans le même domaine ou des compétences domains_javascript différentes-js tutoriel-php.cn

Les méthodes de communication entre les sous-pages iframe et les pages parents varient selon que l'attribut src dans l'iframe est un lien de même domaine ou un lien inter-domaines.

1. Communication entre les pages parents et enfants d'un même domaine

Page parent parent.html

Copier le code Le code est le suivant : > function say(){ alert("parent.html"); } function callChild(){ myFrame.window.say(); window.document.getElementById( "button").value="Fin de l'appel"; input id="button" type="button" value="Appel de la fonction say()" dans child.html onclick="callChild()"/> &lt ;/iframe>

Sous-page enfant.html

Copier le code Le code est le suivant : ="text/javascript"> function say(){ alert("child.html"); } function callParent(){ parent.say(); 🎜>parent.window.document.getElementById( "button").value="L'appel se termine" 🎜>

Appel de méthode

La page parent appelle la méthode de la page enfant : FrameName.window.childMethod(); méthode de la page parent : parent.window.parentMethod(); Accès à l'élément DOM

Après avoir obtenu l'objet window.document de la page, vous pouvez accéder à l'élément DOM Notes

Assurez-vous d'opérer après le chargement de l'iframe. Si l'iframe est toujours Si vous commencez à appeler des méthodes ou des variables avant la fin du chargement, une erreur se produira. Il existe deux façons de déterminer si l'iframe a été chargée :

1. Utilisez l'événement onload sur l'iframe

2. Utilisez document.readyState=="complete" pour déterminer .

2. Méthode de communication entre pages parent-enfant entre domaines

Si l'iframe est liée à une page externe, la méthode de communication sous le même nom de domaine ne peut pas être utilisée en raison de mécanisme de sécurité. La page parent transmet les données à la page enfant

L'astuce consiste à utiliser la valeur de hachage de l'objet de localisation et à y transmettre les données de communication. Ajoutez simplement une chaîne de données supplémentaire après le src de l'iframe dans la page parent, puis dans la sous-page, vous pouvez obtenir les données ici instantanément d'une manière ou d'une autre, par exemple :

1. sous-page La méthode setInterval définit la minuterie et surveille les changements dans location.href pour obtenir les informations de données ci-dessus

2 Ensuite, la page enfant effectue le traitement logique correspondant en fonction de ces informations de données

Le. la page enfant rend compte à la page parent La technique de transmission des données

consiste à utiliser une iframe proxy, qui est intégrée dans la page enfant et doit rester dans le même domaine que la page parent, puis utilise pleinement l'implémentation principe de la première méthode de communication ci-dessus pour transférer la page enfant. Les données de la page sont transmises à l'iframe proxy, et comme l'iframe proxy et la page principale sont dans le même domaine, la page principale peut obtenir les données en utilisant le même domaine. méthode de domaine. Utilisez window.top ou window.parent.parent pour obtenir une référence à l'objet fenêtre de niveau supérieur du navigateur.