Explication détaillée de la communication interdomaine iframe encapsulation_jquery

communication inter-domaines iframe

Voir la démo Téléchargement du code source

Comme nous le savons tous, en raison des restrictions de sécurité imposées par le javascript frontal sur l'accès inter-domaines, javascript ne peut accéder qu'au contenu du même domaine que le document le contenant.

Exemple d'utilisation :

L'exigence est d'intégrer http://www.iframe.com/iframe.html via iframe dans http://www.demo.org/top.html, Dans la page iframe, vous souhaitez appeler une méthode js sur la page supérieure en cliquant sur un bouton.

1. Créez une méthode dans la page d'accueil à utiliser par les pages internes

Copier le code Le code est le suivant :

fonction testFun (texte) {
alerte(texte);
>

2. Intégrer l'iframe dans http://www.demo.org/top.html

Copier le code Le code est le suivant :

3. Créez une page proxy sous le domaine www.demo.org http://www.demo.org/proxy.htmlpour la communication inter-domaines

4. Ajoutez la logique de la page proxy dans http://www.demo.org/proxy.html

5. Configurez l'adresse de la page proxy via js dans la page http://www.iframe.com/iframe.html

Copier le code Le code est le suivant :

TopProxyConfig = {url:'http://www.demo.org/proxy.html'};

6. Charger le module de communication via kissy

Copier le code Le code est le suivant :

KISSY.use('topproxy', fonction(S, TopProxy){
//Exécuter le code
});

7. Accédez directement à http://www.demo.org/top.html via TopProxy.call à http://www.iframe.com/iframe.html Méthodes dans , telles que

KISSY.use('topproxy', function(S, TopProxy){
 TopProxy.call('testFun', '这是一个真实的故事');
});

Le premier paramètre de la méthode d'appel est le nom de méthode global de la page Web externe, qui prend en charge ".". Il existe un nombre illimité de paramètres suivants, qui sont tous transmis à la méthode cible.

Remarque :

1. Il ne sera peut-être pas exécuté immédiatement après avoir été appelé. Il sera déclenché après le chargement de l'iframe. Si vous souhaitez précharger, vous pouvez exécuter une méthode inutile à l'avance.
2. Si TopProxyConfig n'est pas défini, il sera considéré que l'iframe référencée et l'iframe parent sont dans le même domaine (grand domaine) et l'objet supérieur sera appelé directement.
3. Sous IE678, une erreur peut être signalée si vous appelez directement la méthode système en haut, car la méthode système ne prend pas en charge l'application.

Principe :

La page A est intégrée dans la page iframe B. Si B veut appeler la méthode de A et transmettre des données, alors B peut intégrer une page iframe C dans le même domaine que la page A. C peut accéder à A via la fenêtre window.top. Ensuite, dans B, vous pouvez modifier le hachage du href de C pour transmettre certaines informations à C, puis C transmet les informations à A, atteignant ainsi indirectement l'objectif de B de transmettre des informations à A