So greifen Sie über JavaScript auf den übergeordneten Iframe zu

Nun, ich habe einen IFrame, der dieselbe Domain-Seite aufruft. Mein Problem ist, dass ich über diese aufgerufene Seite (über JavaScript) auf einige Informationen von diesem übergeordneten Iframe zugreifen möchte. Wie kann ich auf diesen Iframe zugreifen?

Details: Es gibt mehrere Iframes wie diesen, auf denen dieselbe Seite geladen werden kann, da ich eine Windows-Umgebung programmiere. Ich habe vor, diesen Iframe zu schließen, deshalb muss ich wissen, welchen ich aus seinem Inneren schließen soll. Ich habe ein Array, das Verweise auf diese Iframes enthält.

EDIT: Dort werden iframes dynamisch generiert

Sie können auch Name und ID auf gleiche Werte setzen

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

So können Sie den nächsten Code auf der untergeordneten Seite verwenden

parent.document.getElementById(window.name);

Rufen window.frameElementSie einfach von Ihrer gerahmten Seite an. Wenn sich die Seite nicht in einem Frame befindet, frameElementwird dies der Fall sein null.

Der andere Weg (das Fensterelement in einen Rahmen zu bekommen ist weniger trivial), aber der Vollständigkeit halber:

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

Ich würde empfehlen, die postMessage-API zu verwenden .

Rufen Sie in Ihrem Iframe an:

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

Auf der Seite, auf der Sie den Iframe einfügen, können Sie auf Ereignisse wie dieses warten:

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

    }, false);

Übrigens ist es auch möglich, andere Fenster und nicht nur Iframes aufzurufen.

Lesen Sie mehr über die API auf John postmessage Resigs Blog hier

Alte Frage, aber ich hatte gerade das gleiche Problem und fand einen Weg, um den Iframe zu bekommen. Es geht einfach darum, das Frames [] -Array des übergeordneten Fensters zu durchlaufen und das contentWindow jedes Frames anhand des Fensters zu testen, in dem Ihr Code ausgeführt wird. Beispiel:

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

Oder mit jQuery:

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

Diese Methode spart das Zuweisen einer ID zu jedem Iframe, was in Ihrem Fall gut ist, da sie dynamisch erstellt werden. Ich konnte keinen direkteren Weg finden, da Sie das iframe-Element nicht mit window.parent abrufen können - es geht direkt zum übergeordneten Fensterelement (Überspringen des iframe). Das Durchlaufen scheint also der einzige Weg zu sein, es sei denn, Sie möchten IDs verwenden.

Sie können verwenden, parentum auf die übergeordnete Seite zuzugreifen. Um auf eine Funktion zuzugreifen, wäre dies:

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

Sobald die ID des Iframes festgelegt ist, können Sie wie unten gezeigt vom inneren Dokument aus auf den Iframe zugreifen.

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

Funktioniert gut in IE, Chrome und FF.

Vielleicht einfach benutzen

window.parent

in Ihren Iframe, um den aufrufenden Frame / die aufrufenden Fenster zu erhalten. Wenn Sie mehrere Anrufrahmen hatten, können Sie verwenden

window.top

Versuchen Sie Folgendes: Richten Sie in Ihrem übergeordneten Frame IFRAMEs wie folgt ein:

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

Beachten Sie, dass die ID jedes Frames als Anker im src übergeben wird.

Dann können Sie in Ihrem inneren HTML-Code über location.hash auf die ID des Frames zugreifen, in den es geladen wurde:

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

Anschließend können Sie auf parent.document.getElementById () zugreifen, um aus dem iframe heraus auf das iframe-Tag zuzugreifen

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