Comment accéder à parent Iframe à partir de JavaScript

Eh bien, j'ai une IFrame, qui appelle une même page de domaine. Mon problème est que je veux accéder à certaines informations de ce parent Iframe à partir de cette 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 suis en train de programmer un environnement Windows. J'ai l'intention de fermer cette Iframe, c'est pourquoi j'ai besoin de savoir qui je doit la fermer de l'intérieur de lui. J'ai un tableau conserver les références à ces Iframes.

EDIT: il iframes sont générés dynamiquement ""

148
demandé sur Brett DeWoody 2009-06-01 18:43:07

9 réponses

vous pouvez aussi définir le nom et L'ID à des valeurs égales

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

ainsi vous pourrez utiliser le code suivant à l'intérieur de la page de l'enfant

parent.document.getElementById(window.name);
122
répondu Aquatic 2009-06-01 16:16:08

appelez simplement window.frameElement à partir de votre page encadrée. Si la page n'est pas dans un cadre, alors frameElement sera null .

de l'autre côté (obtenir l'élément de 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;
}
77
répondu Ian Carter 2012-09-04 21:30:12

je recommande d'utiliser le postMessage API .

dans votre iframe, appelez:

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

dans la page vous incluez l'iframe que vous pouvez écouter pour 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);

soit dit en passant, il est également possible de faire des appels vers d'autres fenêtres, et pas seulement vers des iframes.

plus d'informations à propos de l'API postMessage sur le Blog de John Resigs ici

68
répondu Kenneth Lynne 2013-03-24 17:24:02

vieille question, mais j'ai juste eu ce même problème et trouvé un moyen d'obtenir l'iframe. Il s'agit simplement d'itérer à travers le tableau frames[] de la fenêtre mère et de tester le contenu de chaque fenêtre par rapport à la fenêtre dans laquelle votre code est en cours d'exécution. 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 sauve l'assignation D'un ID à chaque iframe, ce qui est bon dans votre cas car ils sont dynamiquement créés. Je ne pouvais pas trouver un de manière plus directe, puisque vous ne pouvez pas obtenir l'élément iframe en utilisant window.parent - il va directement à l'élément de fenêtre parent (sauter l'iframe). Donc les passer à travers semble le seul moyen, sauf si vous voulez utiliser des cartes D'identité.

28
répondu ingredient_15939 2010-10-10 16:21:39

vous pouvez utiliser parent pour accéder à la page parent. Ainsi pour accéder à une fonction il serait:

var obj = parent.getElementById('foo');
15
répondu kemiller2002 2014-03-14 18:58:52

une fois que l'id d'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.

10
répondu Akash Kava 2012-06-21 13:58:40

peut - être juste utiliser

window.parent

dans votre iframe pour obtenir le cadre d'appel / fenêtres. Si vous aviez plusieurs calling frame, vous pouvez utiliser

window.top
5
répondu Clawfire 2011-11-28 09:29:02

essayez ceci, dans votre cadre parent configurez vous IFRAMEs 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'id de chaque image est passé comme une ancre dans le src.

alors dans votre html interne vous pouvez accéder à l'id du cadre dans lequel il est chargé via l'emplacement.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 depuis l'intérieur de l'iframe

3
répondu Mark Porter 2009-06-01 16:01:42
// just in case some one is searching for a solution
function get_parent_frame_dom_element(win)
{
    win = (win || window);
    var parentJQuery = window.parent.jQuery;
    var ifrms = parentJQuery("iframe.upload_iframe");
    for (var i = 0; i < ifrms.length; i++)
    {
        if (ifrms[i].contentDocument === win.document)
            return ifrms[i];
    }
    return null;
}
-1
répondu Alex 2012-01-16 16:49:06