Invoquer du code JavaScript dans un iframe à partir de la page mère

Question

En gros, j'ai un iframe intégré dans une page et le iframe a quelques JavaScript routines que je dois invoquer à partir de la page parent.

L'inverse est assez simple, puisqu'il suffit d'appeler parent.functionName() mais malheureusement, c'est exactement le contraire dont j'ai besoin.

S'il vous plaît noter que mon problème n'est pas de changer la source URL de la iframe mais en invoquant une fonction définie dans le iframe .

Answer 1

Supposons que l'identifiant de votre iFrame est "targetFrame" et que la fonction que vous souhaitez appeler est la suivante targetFunction() :

document.getElementById('targetFrame').contentWindow.targetFunction();

Vous pouvez également accéder au cadre en utilisant window.frames au lieu de document.getElementById .

// this option does not work in most of latest versions of chrome and Firefox
window.frames[0].frameElement.contentWindow.targetFunction();

Answer 2

Il y a quelques bizarreries à connaître ici.

1. HTMLIFrameElement.contentWindow est probablement le moyen le plus simple, mais il ne s'agit pas d'une propriété standard et certains navigateurs ne la prennent pas en charge, surtout les plus anciens. Cela est dû au fait que la norme DOM Level 1 HTML n'a rien à dire sur la propriété window objet.

2. Vous pouvez également essayer HTMLIFrameElement.contentDocument.defaultView Ce qui est autorisé par quelques anciens navigateurs, mais pas par IE. Malgré cela, la norme ne stipule pas explicitement que vous obtenez le format window pour la même raison que (1), mais vous pouvez obtenir quelques versions supplémentaires du navigateur ici si vous le souhaitez.

3. window.frames['name'] le retour de la fenêtre est l'interface la plus ancienne et donc la plus fiable. Mais vous devez alors utiliser un name="..." pour pouvoir obtenir un cadre par son nom, ce qui est légèrement laid. déprécié /transitionnel. ( id="..." serait mieux, mais IE n'aime pas ça).

4. window.frames[number] est également très fiable, mais le secret consiste à connaître le bon indice. Vous pouvez vous en sortir, par exemple, si vous savez que vous n'avez qu'une seule iframe sur la page.

5. Il est tout à fait possible que la iframe enfant n'ait pas encore été chargée, ou que quelque chose d'autre se soit mal passé pour la rendre inaccessible. Il peut être plus facile d'inverser le flux de communication, c'est-à-dire de faire en sorte que l'iframe enfant notifie son window.parent script lorsqu'il a terminé son chargement et est prêt à être rappelé. En passant un de ses propres objets (par exemple une fonction de rappel) au script parent, ce dernier peut alors communiquer directement avec le script dans l'iframe sans avoir à se soucier de l'HTMLIFrameElement auquel il est associé.

Answer 3

Appeler une fonction JS parent depuis iframe est possible, mais seulement lorsque le parent et la page chargée dans la fenêtre iframe proviennent du même domaine, c'est-à-dire abc.com, et utilisent le même protocole, c'est-à-dire que les deux sont soit sur http:// o https:// .

L'appel échouera dans les cas suivants :

1. La page mère et la page iframe proviennent de domaines différents.

2. Ils utilisent des protocoles différents, l'un est sur http:// et l'autre sur https://.

Toute solution de contournement de cette restriction serait extrêmement peu sûre.

Par exemple, imaginons que j'enregistre le domaine superwinningcontest.com et que j'envoie des liens aux courriels des gens. Lorsqu'ils chargent la page principale, je pourrais cacher quelques iframe s'y trouve et lit son flux Facebook, vérifie ses récentes transactions Amazon ou PayPal ou, s'il a utilisé un service qui n'a pas mis en place une sécurité suffisante, transfère de l'argent depuis son compte. C'est pourquoi JavaScript est limité au même domaine et au même protocole.

Answer 4

Dans le IFRAME, rendez votre fonction publique à l'objet fenêtre :

window.myFunction = function(args) {
   doStuff();
}

Pour un accès à partir de la page parentale, utilisez ceci :

var iframe = document.getElementById("iframeId");
iframe.contentWindow.myFunction(args);

Answer 5

Si la cible de l'iFrame et le document qui la contient se trouvent sur un domaine différent, les méthodes affichées précédemment risquent de ne pas fonctionner, mais il existe une solution :

Par exemple, si le document A contient un élément iframe qui contient le document B, et que le script du document A appelle postMessage() sur l'objet Window du document B, alors un événement message sera déclenché sur cet objet, marqué comme provenant de la Window du document A. Le script du document A pourrait ressembler à ceci :

var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello world', 'http://b.example.org/');

Pour enregistrer un gestionnaire d'événements pour les événements entrants, le script utiliserait addEventListener() (ou des mécanismes similaires). Par exemple, le script du document B pourrait ressembler à ceci :

window.addEventListener('message', receiver, false);
function receiver(e) {
  if (e.origin == 'http://example.com') {
    if (e.data == 'Hello world') {
      e.source.postMessage('Hello', e.origin);
    } else {
      alert(e.data);
    }
  }
}

Ce script vérifie d'abord que le domaine est le domaine attendu, puis examine le message, qu'il affiche à l'utilisateur ou auquel il répond en renvoyant un message au document qui a envoyé le message en premier lieu.

via http://dev.w3.org/html5/postmsg/#web-messaging