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

Eh bien, j'ai un IFrame, qui appelle une même page de domaine. Mon problème est que je souhaite 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, qui peuvent avoir la même page chargée, car 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 de l'intérieur de lui. J'ai un tableau gardant des références à ces Iframes.

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

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

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

vous pourrez donc utiliser le code suivant dans la page enfant

parent.document.getElementById(window.name);

Appelez simplement window.frameElementdepuis votre page encadrée. Si la page n'est pas dans un cadre, alors frameElementseranull .

L'autre manière (obtenir l'élément window dans 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;
}

Je recommanderais d'utiliser l' 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);

D'ailleurs, 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 John Resigs ici

Ancienne question, mais j'ai juste eu ce même problème et j'ai trouvé un moyen d'obtenir l'iframe. Il s'agit simplement d'itérer dans le tableau frames [] de la fenêtre parente et de tester le contentWindow de chaque frame par rapport à 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 bien dans votre cas car elles sont créées dynamiquement. Je n'ai pas pu trouver de moyen plus direct, car vous ne pouvez pas obtenir l'élément iframe en utilisant window.parent - il va directement à l'élément de fenêtre parent (en ignorant l'iframe). Les parcourir en boucle semble donc le seul moyen, à moins que vous ne souhaitiez utiliser des identifiants.

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

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

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

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

Fonctionne bien dans IE, Chrome et FF.

Peut-être juste utiliser

window.parent

dans votre iframe pour obtenir le cadre / windows appelant. Si vous aviez plusieurs trames d'appel, vous pouvez utiliser

window.top

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'id de chaque trame est passé en tant qu'ancre dans le src.

puis dans votre html interne, vous pouvez accéder à l'identifiant 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 depuis l'intérieur de l'iframe

// 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;
}