Pobierz element z ramki iFrame

Jak uzyskać <div>z wewnątrz <iframe>?

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

Możesz po prostu napisać:

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

a pierwszy ważny dokument wewnętrzny zostanie zwrócony.

Gdy zdobędziesz wewnętrzny dokument, możesz po prostu uzyskać dostęp do jego wewnętrznych elementów w taki sam sposób, jak do dowolnego elementu na bieżącej stronie. ( innerDoc.getElementById... itd.)

WAŻNE: upewnij się, że element iframe znajduje się w tej samej domenie, w przeciwnym razie nie będziesz mieć dostępu do jego elementów wewnętrznych. To byłoby skrypty między witrynami.

Nie zapomnij uzyskać dostępu do iframe po załadowaniu . Stary, ale niezawodny sposób bez 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() to funkcja na stronie i jej działanie na niej

Powyższe odpowiedzi dały dobre rozwiązania przy użyciu Javscript. Oto proste rozwiązanie jQuery:

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

Sztuczka polega na tym, że .contents()metoda jQuery , w przeciwieństwie do .children()której można uzyskać tylko elementy HTML, .contents()może uzyskać zarówno węzły tekstowe, jak i elementy HTML. Właśnie dlatego można uzyskać zawartość dokumentu iframe, używając go.

Dalsze informacje o jQuery .contents(): .contents ()

Pamiętaj, że element iframe i strona muszą należeć do tej samej domeny.

Żadna z pozostałych odpowiedzi nie działała dla mnie. Skończyło się na tym, że w mojej ramce iframe utworzyłem funkcję, która zwraca obiekt, którego szukałem:

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

Następnie wywołujesz tę funkcję w taki sposób, aby pobrać element:

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

Jeśli element iframe nie znajduje się w tej samej domenie, że nie można uzyskać dostępu do jego elementów wewnętrznych od elementu nadrzędnego, ale można zmodyfikować kod źródłowy elementu iframe, można zmodyfikować stronę wyświetlaną przez element iframe, aby wysyłać wiadomości do okna nadrzędnego, co umożliwia w celu udostępniania informacji między stronami. Niektóre źródła:

• https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
• HTML5 - Przesłanie iframe między przeglądarkami - dziecko do rodzica?
• cross site iframe post Wiadomość od dziecka do rodzica

Poniższy kod pomoże ci znaleźć dane iframe.

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