Greifen Sie über den Iframe auf Elemente des übergeordneten Fensters zu

74

Ich habe eine Seite, die wir anrufen können parent.php. Auf dieser Seite habe ich ein iframeFormular mit einem Übermittlungsformular und darüber hinaus ein Div mit der ID "Ziel". Ist es möglich, das Formular im Iframe einzureichen und bei Erfolg das Ziel-Div zu aktualisieren? Sagen Sie, laden Sie eine neue Seite hinein oder so?

Bearbeiten: Das Zieldiv befindet sich auf der übergeordneten Seite. Meine Frage lautet also im Grunde, ob Sie beispielsweise einen jQuery-Aufruf außerhalb des Iframes an die übergeordnete Seite senden können. Und wie würde das aussehen?

Edit 2: So sieht mein jquery-Code jetzt aus. Es befindet sich auf der Iframe-Seite. Das div #target befindet sich in der parent.php

$(;"form[name=my_form]").submit(function(e){     
 e.preventDefault; 
 window.parent.document.getElementById('#target'); 
 $("#target").load("mypage.php", function() { 
 $('form[name=my_form]').submit(); 
 }); 
 })

Ich weiß nicht, ob das Skript aktiv ist, da das Formular erfolgreich gesendet wurde, aber dem Ziel nichts passiert.

Edit 3:

Jetzt versuche ich, die übergeordnete Seite über einen Link im Iframe aufzurufen. Und auch dort kein Erfolg:

<a href="javascript:window.parent.getElementById('#target').load('mypage.php');">Link</a>

— Paparappa
quelle

Das Zieldiv befindet sich auf der übergeordneten Seite oder im Iframe?

— ShankarSangoli

Es ist auf der übergeordneten Seite, daher ist meine Frage grundsätzlich, ob Sie zum Beispiel einen Abfrageaufruf außerhalb des Iframes an die übergeordnete Seite durchführen können.

— Paparappa

120

Ich denke, das Problem könnte sein, dass Sie Ihr Element aufgrund des "#" in Ihrem Aufruf nicht finden, um es zu erhalten:

window.parent.document.getElementById('#target');

Sie benötigen das # nur, wenn Sie jquery verwenden. Hier sollte es sein:

window.parent.document.getElementById('target');

— Barclay
quelle

11

Was ist, wenn sich der Website-Container und der Iframe auf verschiedenen Domains befinden?

— Michelem

2

@Michelem Ich denke du hast kein Glück; Damit Sie Zugriff auf das übergeordnete Element haben, muss der Iframe dasselbe Protokoll und dieselbe Domäne wie das übergeordnete Element haben. Dies ist ein Schutz, um domänenübergreifendes Scripting zu verhindern.

— Jon Onstott

4

@Michelem: Die einzige Möglichkeit, mit dem übergeordneten Element zu kommunizieren, wenn sich der Iframe und das übergeordnete Element in verschiedenen Domänen befinden, ist die Verwendung von window.postMessage (). Dies ist jedoch nur möglich, wenn Sie die Kontrolle über beide Enden haben. Dokumentation hier: developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

— Pål Jørgensen

@michelem Gibt es ein Beispiel für den Zugriff auf das übergeordnete Element in iframe? Wir können Sachen mit window.postMessage () machen, aber was wollen wir auf das Element zugreifen und es in iframe verwenden?

— Vishal

Es ist spät, aber Beispiel window.postMessage () basiert hier auf den Reaktionen dev.to/damcosset/…

— Chetan Jain

15

Sie können von einem iframe aus auf Elemente des übergeordneten Fensters zugreifen, indem Sie Folgendes verwenden window.parent:

// using jquery    
window.parent.$("#element_id");

Welches ist das gleiche wie:

// pure javascript
window.parent.document.getElementById("element_id");

Und wenn Sie mehr als einen verschachtelten Iframe haben und auf den obersten Iframe zugreifen möchten, können Sie Folgendes verwenden window.top:

// using jquery
window.top.$("#element_id");

Welches ist das gleiche wie:

// pure javascript
window.top.document.getElementById("element_id");

— Amr
quelle

1

Nur eine Anmerkung: Die Verwendung von jQuery ist nicht dasselbe wie die Verwendung von getElementById. Könnte verwirrend für neue Entwickler sein 👍

— alistair

9

Haben Sie die folgenden js im Iframe und verwenden Sie Ajax, um das Formular zu senden.

$(function(){

   $("form").submit(e){
        e.preventDefault();

       //Use ajax to submit the form
       $.ajax({
          url: this.action,
          data: $(this).serialize(),
          success: function(){
             window.parent.$("#target").load("urlOfThePageToLoad");
          });
       });

   });

});

— ShankarSangoli
quelle

Es funktioniert, um das Formular über Ajax zu senden, aber das Ziel-Div bleibt von Anfang an unverändert. Es scheint nicht zu funktionieren, mit parent.php innerhalb des iframes zu kommunizieren.

— Paparappa

Wenn sich der Iframe in derselben Domäne befindet, treten keine Probleme auf. Können Sie versuchen, window.parent.$("#target").lengthim Erfolgshandler zu alarmieren ?

— ShankarSangoli

Der Iframe befindet sich in derselben Domäne. Nun, ich habe diesen Code anstelle von window.parent eingefügt. $ ("# Target"). Load ("urlOfThePageToLoad"); aber es gab nichts zurück. Wo in Ihrem Code "Formular" steht, soll es der Name des Formulars sein? Könnte das sein?

— Paparappa

Wie heißt das Formular? Put ist wie form[name=nameOfYourform]anstelle vonform

— ShankarSangoli

Was versuchst du in deiner modifizierten Frage zu tun?

— ShankarSangoli

4

Ich denke, Sie können einfach window.parent aus dem iframe verwenden. window.parent gibt das Fensterobjekt der übergeordneten Seite zurück, sodass Sie Folgendes tun können:

window.parent.document.getElementById('yourdiv');

Dann mach was du willst mit diesem Div.

— varfoo
quelle

Ich bin ein Anfänger, aber sollte ich so etwas in die ifram-Datei aufnehmen?

— Paparappa

$ (document) .ready (function () {window.parent.document.getElementById ('# target'); $ ("# target"). load ("file.php");});

— Paparappa

Wahrscheinlich eher wie: $ (document) .ready (function () {$ (window.parent.document.getElementById ("target")). Load ("file.php")); });

— Varfoo

Ich fürchte, das funktioniert nicht. Das Formular wird gut übermittelt, aber dem Ziel-Div passiert nichts. Es bleibt wie es ist. Hmm ..

— Paparappa

Möglicherweise muss das Senden des Formulars verhindert werden, bis das Javascript, das Sie vom iframe ausführen möchten, das Senden beendet hat. Es wäre also ungefähr so: (Entschuldigung, wenn der folgende Code Fehler enthält, das Schreiben in einen Codeblock wie diesen ist schmerzhaft): $ (; "form"). Submit (function (e) {e.preventDefault; window .parent.document.getElementById ('# target'); $ ("# target"). load ("file.php", function () {$ ('form'). submit ();});})

— Varfoo