Element aus einem iFrame abrufen

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

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.

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>

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

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

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.

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();

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:

• https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
• Html5 - Cross Browser Iframe Postmessage - Kind zu Eltern?
• Cross Site Iframe postMessage vom Kind zum Elternteil

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

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