web-dev-qa-db-de.com

So greifen Sie mit JavaScript auf übergeordnete Iframes 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, bei denen möglicherweise dieselbe Seite geladen wird, da ich eine Windows-Umgebung programmiere. Ich habe vor, diesen Iframe zu schließen, deshalb muss ich wissen, welchen ich aus seinem Inneren heraus schließen soll. Ich habe ein Array, das Verweise auf diese Iframes enthält.

EDIT: Dort werden iframes dynamisch generiert

154
José Leal

Sie können auch den Namen und die ID auf gleiche Werte einstellen

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

so können Sie den nächsten Code in der untergeordneten Seite verwenden

parent.document.getElementById(window.name);
129
Aquatic

Rufen Sie einfach window.frameElement von Ihrer gerahmten Seite. Befindet sich die Seite nicht in einem Frame, ist frameElementnull.

Der Vollständigkeit halber ist der andere Weg (das Fensterelement in einen Rahmen einzufügen, ist weniger trivial):

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

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

Rufen Sie in Ihrem iframe auf:

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

Auf der Seite, in der Sie den Iframe einschließen, können Sie auf Ereignisse wie das folgende warten:

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

    }, false);

Es ist übrigens auch möglich, andere Fenster aufzurufen und nicht nur iFrames.

Weitere Informationen zur postMessage-API finden Sie im John Resigs-Blog hier

75
Kenneth Lynne

Alte Frage, aber ich hatte gerade das gleiche Problem und fand einen Weg, den Iframe zu bekommen. Es geht einfach darum, das frames [] -Array des übergeordneten Fensters zu durchlaufen und das contentWindow jedes Frames mit dem Fenster zu vergleichen, 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 erspart es, jedem iframe eine ID zuzuweisen, 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 (überspringt das iframe). Es scheint also die einzige Möglichkeit zu sein, diese zu durchlaufen, es sei denn, Sie möchten IDs verwenden.

28

sie können parent verwenden, um auf die übergeordnete Seite zuzugreifen. Um auf eine Funktion zuzugreifen, wäre es also:

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

Sobald die ID von iframe festgelegt ist, können Sie wie unten gezeigt über das innere Dokument auf iframe zugreifen.

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

Funktioniert gut in IE, Chrome und FF.

11
Akash Kava

Vielleicht einfach benutzen

window.parent

in deinen iFrame, um den aufrufenden Frame/die aufrufenden Fenster zu erhalten. Wenn Sie mehrere Calling Frames hatten, können Sie verwenden

window.top
6
Clawfire

Versuchen Sie dies, und 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.

in deinem inneren html kannst du dann ü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>

dann können Sie auf parent.document.getElementById () zugreifen, um vom iframe-Tag aus auf das iframe-Tag zuzugreifen

3
Mark Porter