Méthode de communication entre la sous-page iframe intégrée et les compétences js_javascript de la page parent

L'exemple de cet article décrit la méthode de communication entre la sous-page iframe intégrée et la page parent js. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

La méthode de communication entre la page dans le cadre iframe et la page principale dépend du fait que l'attribut src dans l'iframe est un lien de même domaine ou un lien inter-domaine. Il existe évidemment différentes méthodes de communication et mutuelles. L'accès aux éléments DOM dans le même domaine est simple. Il en existe de nombreux, et ceux inter-domaines nécessitent des moyens intelligents pour établir la communication.

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 :

Page enfant enfant.html :

Copier le code Le code est le suivant :

Appel de méthode

Comme le montre l'exemple ci-dessus, la page parent peut appeler la page enfant via : FrameName.window.childMethod(); (Cette méthode est compatible avec différents navigateurs)
La page enfant appelle la méthode de la page parent : parent.window.parentMethod();

Accès aux éléments DOM

Après avoir obtenu l'objet fenêtre enfant basé sur FrameName.window, accéder aux éléments DOM qu'il contient n'est pas différent de l'accès aux éléments DOM dans la même page. Vous pouvez transmettre

Copier. code Le code est le suivant :

document.getElementById(),document.getElementsByName()[index]

Par exemple :

Copier le code Le code est le suivant :

parent.window.document.getElementsByName("myFrame")[0];
monFrame.window.document.getElementById("bouton")

Les fenêtres peuvent être omises.

Remarques

Assurez-vous d'opérer après le chargement de l'Iframe. Si vous commencez à appeler des méthodes ou des variables avant le chargement de l'Iframe, des erreurs se produiront sans aucun doute. Il existe deux manières de déterminer si l'Iframe a été chargé :

1. Utilisez l'événement onload sur Iframe ;
2. Utilisez document.readyState=="complete" pour déterminer

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

Si l'iframe renvoie vers 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 les données à la page enfant

L'astuce pour y parvenir est d'utiliser la valeur de hachage de l'objet de localisation pour lui transmettre les données de communication. Il suffit d'ajouter une chaîne #data après le src de l'iframe dans la page parent (les données sont les données que vous avez. voulez passer), puis dans la page enfant. Les données ici peuvent être obtenues instantanément grâce à une méthode sur la page. En fait, une méthode couramment utilisée est :

.

1. Réglez la minuterie dans la sous-page via la méthode setInterval et surveillez les changements dans location.href pour obtenir les informations de données ci-dessus

2. Ensuite, la sous-page peut effectuer le traitement logique correspondant basé sur ces informations de données.

La page enfant transmet les données à la page parent

L'astuce pour l'implémentation est d'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. Nous pouvons alors utiliser pleinement le principe d'implémentation de la première méthode de communication ci-dessus. pour transférer la page enfant vers Les données sont transmises à iframeC. La question suivante est de savoir comment laisser iframeC transmettre les données à la page principale A. Comme iframeC et la page principale sont dans le même domaine, il devient beaucoup plus simple de transférer des données entre Ils appartiennent au même nom de domaine. Problème de communication, comme indiqué précédemment, vous pouvez utiliser ici une propriété couramment utilisée window.top (vous pouvez également utiliser window.parent.parent), qui renvoie une référence à la fenêtre de niveau supérieur. objet chargé dans le navigateur, de cette façon nous pouvons utiliser directement les méthodes de la page parent.

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