Element aus einem iFrame abrufen

244

Wie kommt man <div>aus einem heraus <iframe>?

javascript iframe html

— Joepour
quelle

382

var iframe = document.getElementById('iframeId');
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

Sie könnten einfacher schreiben:

var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

und das erste gültige innere Dokument wird zurückgegeben.

Sobald Sie das innere Dokument erhalten haben, können Sie auf die Interna genauso zugreifen wie auf jedes Element auf Ihrer aktuellen Seite. ( innerDoc.getElementById... etc.)

WICHTIG: Stellen Sie sicher, dass sich der Iframe in derselben Domäne befindet, da Sie sonst keinen Zugriff auf seine Interna erhalten. Das wäre Cross-Site-Scripting.

— geowa4
quelle

4

Gute Antwort. Wussten Sie, dass Sie Folgendes tun können: var innerDoc = iframe.contentDocument || iframe.contentWindow.document; // besser lesbar und bedeutet dasselbe

— David Snabel-Caunt

5

Ich habe Leute gesehen, die davon mehr verwirrt waren als ternäre Operatoren. Sie scheinen nicht zu wissen, dass der erste gültige zurückgegeben wird.

— Geowa4

5

in der Tat, als ich die Antwort bearbeitete, um sie aufzunehmen, fragte mich der Typ über meiner Schulter, was das tat ...

— geowa4

12

Wahrscheinlich besser zu erziehen, als der Einfachheit halber komplexeren Code zu verwenden :)

— David Snabel-Caunt

1

@JellicleCat: Jeder Weg, um dies zu umgehen, ist eine Möglichkeit, "Cross-Site Request Forgery"

— durchzuführen

12

Vergessen Sie nicht, nach dem Laden auf iframe zuzugreifen . Alter aber zuverlässiger Weg ohne jQuery:

<iframe src="samedomain.com/page.htm" id="iframe" onload="access()"></iframe>

<script>
function access() {
   var iframe = document.getElementById("iframe");
   var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
   console.log(innerDoc.body);
}
</script>

— lukyer
quelle

3

window.parent.document.getElementById("framekit").contentWindow.CallYourFunction('pass your value')

CallYourFunction() ist die Funktion innerhalb der Seite und diese Funktionsaktion darauf

— VishalDream
quelle

5

Das ruft eine Funktion von einem iFrame auf und erhält keinen Verweis auf das Element.

— Nick Mitchell

3

Die obigen Antworten ergaben gute Lösungen mit Javscript. Hier ist eine einfache jQuery-Lösung:

$('#iframeId').contents().find('div')

Der Trick dabei ist die .contents()Methode von jQuery , die im Gegensatz zu .children()nur HTML-Elementen .contents()sowohl Textknoten als auch HTML-Elemente abrufen kann. Deshalb kann man mit ihm Dokumentinhalte eines Iframes abrufen.

Lesen Sie weiter über jQuery .contents(): .contents ()

Beachten Sie, dass sich der Iframe und die Seite in derselben Domäne befinden müssen.

— SkuraZZ
quelle

1

Keine der anderen Antworten funktionierte für mich. Am Ende habe ich in meinem Iframe eine Funktion erstellt, die das gesuchte Objekt zurückgibt:

function getElementWithinIframe() {
    return document.getElementById('copy-sheet-form');
}

Dann rufen Sie diese Funktion folgendermaßen auf, um das Element abzurufen:

var el = document.getElementById("iframeId").contentWindow.functionNameToCall();

— reckte sich
quelle

0

Wenn sich der Iframe nicht in derselben Domäne befindet, sodass Sie vom übergeordneten Element keinen Zugriff auf seine Interna erhalten, aber den Quellcode des Iframes ändern können, können Sie die vom Iframe angezeigte Seite ändern, um Nachrichten an das übergeordnete Fenster zu senden Sie können Informationen zwischen den Seiten teilen. Einige Quellen:

— Jose V.
quelle

-3

Der folgende Code hilft Ihnen dabei, die Iframe-Daten herauszufinden.

let iframe = document.getElementById('frameId');
let innerDoc = iframe.contentDocument || iframe.contentWindow.document;

— aschiges Nagagat
quelle