Comment accéder à l'Iframe parent à partir de JavaScript

Question

J'ai une IFrame qui appelle une page du même domaine. Mon problème est que je veux accéder à certaines informations de cette Iframe parente à partir de la page appelée (à partir de JavaScript). Comment puis-je accéder à cette Iframe ?

Détails : Il y a plusieurs Iframes comme celle-ci, qui peuvent avoir la même page chargée, parce que je programme un environnement Windows. J'ai l'intention de fermer cette Iframe, c'est pourquoi j'ai besoin de savoir laquelle je dois fermer depuis son intérieur. J'ai un tableau qui garde les références à ces Iframes.

EDIT : Les iframes sont générées dynamiquement.

Answer 1

Vous pouvez également définir des valeurs égales pour le nom et l'ID.

<iframe id="frame1" name="frame1" src="any.html"></iframe>

afin que vous puissiez utiliser le code suivant dans la page enfant.

parent.document.getElementById(window.name);

Answer 2

Il suffit d'appeler window.frameElement de votre page encadrée. Si la page n'est pas dans un cadre, alors frameElement sera null .

L'autre façon (obtenir l'élément de la fenêtre à l'intérieur d'un cadre est moins trivial) mais par souci d'exhaustivité :

/**
 * @param f, iframe or frame element
 * @return Window object inside the given frame
 * @effect will append f to document.body if f not yet part of the DOM
 * @see Window.frameElement
 * @usage myFrame.document = getFramedWindow(myFrame).document;
 */
function getFramedWindow(f)
{
    if(f.parentNode == null)
        f = document.body.appendChild(f);
    var w = (f.contentWindow || f.contentDocument);
    if(w && w.nodeType && w.nodeType==9)
        w = (w.defaultView || w.parentWindow);
    return w;
}

Answer 3

Je recommande d'utiliser le API postMessage .

Dans votre iframe, appelez :

window.parent.postMessage({message: 'Hello world'}, 'http://localhost/');

Dans la page où vous incluez l'iframe, vous pouvez écouter des événements comme celui-ci :

window.addEventListener('message', function(event) {
      if(event.origin === 'http://localhost/')
      {
        alert('Received message: ' + event.data.message);
      }
      else
      {
        alert('Origin not allowed!');
      }

    }, false);

A propos, il est également possible de faire des appels à d'autres Windows, et pas seulement à des iframes.

Pour en savoir plus sur l'API postMessage, consultez le blog de John Resigs. aquí

Answer 4

Vieille question, mais je viens d'avoir le même problème et j'ai trouvé un moyen d'obtenir le iframe. Il s'agit simplement d'itérer dans le tableau frames[] de la fenêtre parent et de tester le contentWindow de chaque frame en fonction de la fenêtre dans laquelle votre code s'exécute. Exemple :

var arrFrames = parent.document.getElementsByTagName("IFRAME");
for (var i = 0; i < arrFrames.length; i++) {
  if (arrFrames[i].contentWindow === window) alert("yay!");
}

Ou, en utilisant jQuery :

parent.$("iframe").each(function(iel, el) {
  if(el.contentWindow === window) alert("got it");
});

Cette méthode évite d'attribuer un ID à chaque iframe, ce qui est une bonne chose dans votre cas puisqu'ils sont créés dynamiquement. Je n'ai pas trouvé de moyen plus direct, puisque vous ne pouvez pas obtenir l'élément iframe en utilisant window.parent - il va directement à l'élément parent de la fenêtre (en sautant l'iframe). Le fait de les parcourir en boucle semble donc être la seule solution, à moins que vous ne souhaitiez utiliser des ID.

Answer 5

Vous pouvez utiliser parent pour accéder à la page parent. Donc pour accéder à une fonction, ce serait :

var obj = parent.getElementById('foo');