web-dev-qa-db-de.com

Element aus einem iFrame abrufen

Wie erhält man einen <div> aus einem <iframe>?

193
joepour
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 abgerufen haben, können Sie auf die internen Informationen genauso zugreifen, wie Sie auf jedes Element Ihrer aktuellen Seite zugreifen würden. (innerDoc.getElementById... etc.)

WICHTIG: Stellen Sie sicher, dass sich der iframe in derselben Domäne befindet. Andernfalls erhalten Sie keinen Zugriff auf die internen Daten. Das wäre Cross-Site-Scripting.

329
geowa4

Vergessen Sie nicht, auf iframe zuzugreifen, nachdem es geladen wurde . 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>
6
lukyer
window.parent.document.getElementById("framekit").contentWindow.CallYourFunction('pass your value')

CallYourFunction() ist eine Funktion innerhalb einer Seite und die Funktionsaktion darauf

3
VishalDream

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

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

Der Trick hier ist die .contents()-Methode von jQuery. Anders als .children(), die nur HTML-Elemente abrufen kann, kann .contents() sowohl Textknoten als auch HTML-Elemente abrufen. Aus diesem Grund kann man den Dokumentinhalt eines iframe erhalten, indem man ihn verwendet. 

Weitere Informationen zu jQuery .contents(): .contents ()

Beachten Sie, dass sich iframe und page in derselben Domain befinden müssen.

1
SkuraZZ

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

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

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

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

Befindet sich iframe nicht in derselben Domäne, so dass Sie vom übergeordneten Fenster keinen Zugriff auf seine Interna erhalten, aber den Quellcode des iframe ändern können, können Sie die vom iframe angezeigte Seite so ändern, dass Nachrichten an das übergeordnete Fenster gesendet werden Sie Informationen zwischen den Seiten zu teilen. Einige Quellen:

0
Jose

Der folgende Code hilft Ihnen, die Iframendaten herauszufinden.

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