web-dev-qa-db-fra.com

Comment accéder au parent Iframe à partir de JavaScript

Eh bien, j'ai un IFrame, qui appelle une même page de domaine. Mon problème est que je veux accéder à certaines informations de cet Iframe parent à partir de cette page appelée (à partir de JavaScript). Comment puis-je accéder à cet Iframe?

Détails: Il existe plusieurs Iframes comme celui-ci, sur lesquels la même page peut être chargée, car je programme un environnement Windows. J'ai l'intention de fermer cet Iframe, c'est pourquoi j'ai besoin de savoir ce que je devrais fermer de l'intérieur de lui. J'ai un tableau en gardant des références à ces Iframes.

EDIT: Les iframes sont générés dynamiquement

javascriptiframe
154
José Leal

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

<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);
129
Aquatic

Appelez simplement window.frameElement à partir 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 window à l’intérieur d’un cadre est moins triviale) 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;
}
_
82
Ian Carter

Je recommanderais d'utiliser le API postMessage .

Dans votre iframe, appelez:

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

Dans la page que 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);

À propos, il est également possible de faire des appels vers d’autres fenêtres, et pas seulement des iframes.

En savoir plus sur l'API postMessage sur le blog de John Resigs ici

75
Kenneth Lynne

Vieille question, mais j'avais juste le même problème et j'ai trouvé un moyen d'obtenir l'iframe. Il suffit simplement de parcourir le tableau frames [] de la fenêtre parente et de tester le contenu de chaque image par rapport à la fenêtre dans laquelle votre code est exécuté. 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 enregistre l’attribution d’un identifiant à chaque iframe, ce qui est bien dans votre cas car ils sont créés dynamiquement. Je ne pouvais pas trouver un moyen plus direct, car vous ne pouvez pas obtenir l'élément iframe à l'aide de window.parent - il passe directement à l'élément window parent (en ignorant l'iframe). Donc, les parcourir en boucle semble être le seul moyen, à moins que vous ne souhaitiez utiliser des identifiants.

28
ingredient_15939

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

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

Une fois que l'id de iframe est défini, vous pouvez accéder à iframe à partir du document interne, comme indiqué ci-dessous.

var iframe = parent.document.getElementById(frameElement.id);

Fonctionne bien dans IE, Chrome et FF.

11
Akash Kava

Peut-être juste utiliser

window.parent

dans votre iframe pour obtenir le cadre d'appel/windows. Si vous avez plusieurs cadres d'appel, vous pouvez utiliser

window.top
6
Clawfire

Essayez ceci, dans votre cadre parent, configurez vos IFRAME comme ceci:

<iframe id="frame1" src="inner.html#frame1"></iframe>
<iframe id="frame2" src="inner.html#frame2"></iframe>
<iframe id="frame3" src="inner.html#frame3"></iframe>

Notez que l'identifiant de chaque image est passé en tant qu'ancre dans le src.

puis dans votre html interne, vous pouvez accéder à l'id du cadre dans lequel il est chargé via location.hash:

<button onclick="alert('I am frame: ' + location.hash.substr(1))">Who Am I?</button>

alors vous pouvez accéder à parent.document.getElementById () pour accéder à la balise iframe de l'intérieur de l'iframe

3
Mark Porter