it-swarm.com.de

Aufrufen einer übergeordneten Fensterfunktion aus einem Iframe

Ich möchte eine übergeordnete Fenster-JavaScript-Funktion aus einem Iframe aufrufen.

<script>
    function abc()
    {
        alert("sss");
    }
</script>

<iframe id="myFrame">
    <a onclick="abc();" href="#">Call Me</a>
</iframe>
262
Arjun Singh
<a onclick="parent.abc();" href="#" >Call Me </a>

Siehe window.parent

Gibt einen Verweis auf das übergeordnete Element des aktuellen Fensters oder Unterrahmens zurück.

Wenn ein Fenster kein übergeordnetes Element hat, ist seine übergeordnete Eigenschaft ein Verweis auf sich selbst.

Wenn ein Fenster in einem <iframe>, <object> Oder <frame> Geladen wird, ist sein übergeordnetes Element das Fenster mit dem Element, das das Fenster einbettet.

416
rahul

Ich musste kürzlich herausfinden, warum das nicht auch funktionierte.

Das Javascript, das Sie vom Kind iframe aufrufen möchten, muss im Kopf des Elternteils sein. Wenn es sich im Hauptteil befindet, ist das Skript im globalen Bereich nicht verfügbar.

<head>
    <script>
    function abc() {
        alert("sss");
    }
    </script>
</head>
<body>
    <iframe id="myFrame">
        <a onclick="parent.abc();" href="#">Click Me</a>
    </iframe>
</body>

Hoffe das hilft jedem, der wieder auf dieses Problem stößt.

76
Ash Clarke

Window.postMessage ()

Diese Methode aktiviert sicher cross-Origin Kommunikation.

Und wenn Sie Zugriff auf übergeordneten Seitencode haben, können alle übergeordneten Methoden aufgerufen und alle Daten direkt von Iframe übergeben werden. Hier ist ein kleines Beispiel:

Übergeordnete Seite:

if (window.addEventListener) {
    window.addEventListener("message", onMessage, false);        
} 
else if (window.attachEvent) {
    window.attachEvent("onmessage", onMessage, false);
}

function onMessage(event) {
    // Check sender Origin to be trusted
    if (event.Origin !== "http://example.com") return;

    var data = event.data;

    if (typeof(window[data.func]) == "function") {
        window[data.func].call(null, data.message);
    }
}

// Function to be called from iframe
function parentFunc(message) {
    alert(message);
}

Iframe-Code:

window.parent.postMessage({
    'func': 'parentFunc',
    'message': 'Message text from iframe.'
}, "*");

Referenzen:

55

Ich habe dies als separate Antwort gepostet, da es nichts mit meiner vorhandenen Antwort zu tun hat.

Dieses Problem ist kürzlich erneut aufgetreten, wenn über einen Iframe, der auf eine Unterdomäne verweist, auf ein übergeordnetes Element zugegriffen wurde. Die vorhandenen Fixes funktionierten nicht.

Diesmal bestand die Antwort darin, die document.domain der übergeordneten Seite und den iframe so zu ändern, dass sie identisch sind. Dies täuscht das gleiche Origin-Richtlinienprüfungen dahingehend vor, dass sie auf genau derselben Domäne existieren (Subdomänen werden als unterschiedliche Hosts betrachtet und bestehen die gleiche Origin-Richtlinienprüfung nicht).

Fügen Sie das Folgende in das <head> der Seite im Iframe, die mit der übergeordneten Domain übereinstimmt (an Ihren Doctype anpassen).

<script>
    document.domain = "mydomain.com";
</script>

Beachten Sie, dass dies einen Fehler bei der Entwicklung von localhost auslöst. Verwenden Sie daher eine Überprüfung wie die folgende, um den Fehler zu vermeiden:

if (!window.location.href.match(/localhost/gi)) {
    document.domain = "mydomain.com";
} 
19
Ash Clarke

Sie können verwenden

window.top

siehe folgendes.

<head>
    <script>
    function abc() {
        alert("sss");
    }
    </script>
</head>
<body>
    <iframe id="myFrame">
        <a onclick="window.top.abc();" href="#">Click Me</a>
    </iframe>
</body>

Ein weiterer Zusatz für diejenigen, die es brauchen. Die Lösung von Ash Clarke funktioniert nicht, wenn unterschiedliche Protokolle verwendet werden. Stellen Sie daher sicher, dass bei Verwendung von SSL auch SSL in Ihrem iframe verwendet wird, da sonst die Funktion beeinträchtigt wird. Seine Lösung hat jedoch für die Domains selbst funktioniert, also danke dafür.

3
Devon

parent.abc () funktioniert aus Sicherheitsgründen nur auf derselben Domain. Ich habe diese Problemumgehung versucht und meine funktionierte perfekt.

<head>
    <script>
    function abc() {
        alert("sss");
    }

    // window of the iframe
    var innerWindow = document.getElementById('myFrame').contentWindow;
    innerWindow.abc= abc;

    </script>
</head>
<body>
    <iframe id="myFrame">
        <a onclick="abc();" href="#">Click Me</a>
    </iframe>
</body>

Hoffe das hilft. :)

2
Seph Remotigue

Die von Ash Clarke für Subdomains angegebene Lösung funktioniert einwandfrei. Beachten Sie jedoch, dass Sie document.domain = "mydomain.com" einschließen müssen. Sowohl im Kopf der iframe-Seite als auch im Kopf der übergeordneten Seite, wie im Link Überprüfung derselben Origin-Richtlinie angegeben

Eine wichtige Erweiterung derselben Origin-Richtlinie, die für den JavaScript-DOM-Zugriff implementiert wurde (jedoch nicht für die meisten anderen Varianten von Überprüfungen mit demselben Ursprung), besteht darin, dass zwei Sites, die sich eine gemeinsame Top-Level-Domain teilen, sich für die Kommunikation entscheiden, obwohl der "gleiche Host" ausfällt. Überprüfen Sie dies, indem Sie die jeweilige DOM-Eigenschaft der document.domain auf dasselbe qualifizierte Fragment rechts vom aktuellen Hostnamen setzen. Wenn zum Beispiel http://en.example.com/ und http://fr.example.com/ beide document.domain auf "example.com" setzen werden sie von diesem Zeitpunkt an für den Zweck der DOM-Manipulation als derselbe Ursprung betrachtet.

2
Frato

Mit Firefox und Chrome können Sie Folgendes verwenden:

<a href="whatever" target="_parent" onclick="myfunction()">

Wenn meine Funktion sowohl in iframe als auch in parent vorhanden ist, wird die übergeordnete aufgerufen.

1
snowflake

Während einige dieser Lösungen möglicherweise funktionieren, folgt keine von ihnen den bewährten Methoden. Viele weisen globale Variablen zu, und möglicherweise rufen Sie mehrere übergeordnete Variablen oder Funktionen auf, was zu einem überfüllten, anfälligen Namespace führt.

Um dies zu vermeiden, verwenden Sie ein Modulmuster. Im übergeordneten Fenster:

var myThing = {
    var i = 0;
    myFunction : function () {
        // do something
    }
};

var newThing = Object.create(myThing);

Dann im iframe:

function myIframeFunction () {
    parent.myThing.myFunction();
    alert(parent.myThing.i);
};

Dies ähnelt den Mustern, die im Kapitel "Vererbung" von Crockfords wichtigstem Text "Javascript: The Good Parts" beschrieben sind. Weitere Informationen zu den Best Practices von Javascript finden Sie auch auf der w3-Seite. https://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals