Aufrufen von JavaScript-Code in einem iframe von der übergeordneten Seite aus

Question

Im Grunde habe ich eine iframe eingebettet in eine Seite und die iframe hat einige JavaScript Routinen, die ich von der übergeordneten Seite aus aufrufen muss.

Das Gegenteil ist ganz einfach, denn Sie brauchen nur die parent.functionName() aber leider brauche ich genau das Gegenteil davon.

Bitte beachten Sie, dass mein Problem nicht darin besteht, die Quelle zu ändern URL der iframe aber der Aufruf einer Funktion, die in der iframe .

Answer 1

Angenommen, die ID Ihres iFrames ist "targetFrame" und die Funktion, die Sie aufrufen möchten, lautet targetFunction() :

document.getElementById('targetFrame').contentWindow.targetFunction();

Sie können den Rahmen auch über window.frames 代わりに document.getElementById .

// this option does not work in most of latest versions of chrome and Firefox
window.frames[0].frameElement.contentWindow.targetFunction();

Answer 2

Hier gibt es einige Besonderheiten, die zu beachten sind.

1. HTMLIFrameElement.contentWindow ist wahrscheinlich der einfachere Weg, aber es ist nicht ganz eine Standardeigenschaft und einige Browser unterstützen sie nicht, vor allem ältere. Das liegt daran, dass der DOM Level 1 HTML Standard nichts über die window Objekt.

2. Sie können auch versuchen HTMLIFrameElement.contentDocument.defaultView was bei einigen älteren Browsern möglich ist, beim IE jedoch nicht. Trotzdem besagt der Standard nicht ausdrücklich, dass Sie die window Objekt zurück, aus dem gleichen Grund wie (1), aber Sie können ein paar zusätzliche Browser-Versionen hier abholen, wenn Sie interessiert sind.

3. window.frames['name'] Die Rückgabe des Fensters ist die älteste und damit zuverlässigste Schnittstelle. Aber Sie müssen dann eine name="..." Attribut, um einen Rahmen über den Namen abrufen zu können, was etwas hässlich ist/ Abgelehnt /Übergangsweise. ( id="..." wäre besser, aber das mag der IE nicht.)

4. window.frames[number] ist ebenfalls sehr zuverlässig, aber der Trick besteht darin, den richtigen Index zu kennen. Sie können mit diesem z. B. weg, wenn Sie wissen, dass Sie nur den einen iframe auf der Seite haben.

5. Es ist durchaus möglich, dass der untergeordnete iframe noch nicht geladen wurde oder dass etwas anderes schief gelaufen ist, so dass er nicht zugänglich ist. Es könnte einfacher sein, den Kommunikationsfluss umzukehren: Das heißt, der untergeordnete iframe muss seine window.parent Skript, wenn es fertig geladen und bereit ist, zurückgerufen zu werden. Durch die Übergabe eines seiner eigenen Objekte (z. B. eine Callback-Funktion) an das übergeordnete Skript kann dieses dann direkt mit dem Skript im iframe kommunizieren, ohne sich darum kümmern zu müssen, mit welchem HTMLIFrameElement es verbunden ist.

Answer 3

Aufrufen einer übergeordneten JS-Funktion von iframe ist möglich, aber nur, wenn sowohl die übergeordnete als auch die in der iframe von der gleichen Domäne sind, d.h. abc.com, und beide dasselbe Protokoll verwenden, d.h. beide sind entweder auf http:// o https:// .

Der Aufruf schlägt in den unten genannten Fällen fehl:

1. Die übergeordnete Seite und die Iframe-Seite gehören zu einer anderen Domäne.

2. Sie verwenden unterschiedliche Protokolle, eines auf http:// und eines auf https://.

Jede Umgehung dieser Einschränkung wäre extrem unsicher.

Stellen Sie sich zum Beispiel vor, ich hätte die Domain superwinningcontest.com registriert und Links an die E-Mail-Adressen der Teilnehmer verschickt. Wenn sie die Hauptseite aufrufen, könnte ich ein paar Links verstecken. iframe Sie können dort ihren Facebook-Feed lesen, die letzten Amazon- oder PayPal-Transaktionen überprüfen oder - falls sie einen Dienst ohne ausreichende Sicherheitsvorkehrungen genutzt haben - Geld von ihrem Konto überweisen. Aus diesem Grund ist JavaScript auf dieselbe Domäne und dasselbe Protokoll beschränkt.

Answer 4

Machen Sie Ihre Funktion im IFRAME für das Fensterobjekt öffentlich:

window.myFunction = function(args) {
   doStuff();
}

Für den Zugriff von der übergeordneten Seite aus, verwenden Sie dies:

var iframe = document.getElementById("iframeId");
iframe.contentWindow.myFunction(args);

Answer 5

Wenn sich das Ziel des iFrames und das enthaltende Dokument in einer anderen Domäne befinden, funktionieren die zuvor beschriebenen Methoden möglicherweise nicht, aber es gibt eine Lösung:

Wenn Dokument A beispielsweise ein iframe-Element enthält, das Dokument B enthält, und ein Skript in Dokument A postMessage() für das Window-Objekt von Dokument B aufruft, wird ein Nachrichtenereignis für dieses Objekt ausgelöst, das als vom Window-Objekt von Dokument A stammend gekennzeichnet ist. Das Skript in Dokument A könnte wie folgt aussehen

var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello world', 'http://b.example.org/');

Um einen Event-Handler für eingehende Ereignisse zu registrieren, würde das Skript addEventListener() (oder ähnliche Mechanismen) verwenden. Das Skript in Dokument B könnte zum Beispiel so aussehen:

window.addEventListener('message', receiver, false);
function receiver(e) {
  if (e.origin == 'http://example.com') {
    if (e.data == 'Hello world') {
      e.source.postMessage('Hello', e.origin);
    } else {
      alert(e.data);
    }
  }
}

Dieses Skript prüft zunächst, ob es sich bei der Domäne um die erwartete Domäne handelt, und prüft dann die Nachricht, die es entweder dem Benutzer anzeigt oder auf die es antwortet, indem es eine Nachricht an das Dokument zurückschickt, das die Nachricht ursprünglich gesendet hat.

über http://dev.w3.org/html5/postmsg/#web-messaging