Ottieni elementi dall'interno di un iFrame

245

Come si ottiene un <div>all'interno di un <iframe>?

javascript iframe html

— joepour
fonte

382

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

Puoi semplicemente scrivere:

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

e verrà restituito il primo documento interno valido.

Una volta ottenuto il documento interno, puoi semplicemente accedere ai suoi interni allo stesso modo in cui accederesti a qualsiasi elemento della tua pagina corrente. ( innerDoc.getElementById... ecc.)

IMPORTANTE: assicurati che l'iframe si trovi sullo stesso dominio, altrimenti non potrai accedere ai suoi interni. Sarebbe uno scripting cross-site.

— geowa4
fonte

4

Bella risposta. Sapevi che puoi fare: var innerDoc = iframe.contentDocument || iframe.contentWindow.document; // più leggibile e significa lo stesso

— David Snabel-Caunt,

5

Ho visto persone confuse da questo più che operatori ternari. Sembrano non sapere che viene restituito il primo valido.

— geowa4,

5

infatti, quando ho modificato la risposta per includerla, il ragazzo

— dietro la

12

Probabilmente meglio educare che usare un codice più complesso per semplicità :)

— David Snabel-Caunt,

1

@JellicleCat: In ogni caso è un modo per fare "falsificazione di richieste cross-site", noto anche come attacco "one-click" o "equitazione di sessione"

— CSharper

12

Non dimenticare di accedere a iframe dopo averlo caricato . Modo vecchio ma affidabile senza 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
fonte

3

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

CallYourFunction() è la funzione all'interno della pagina e quella funzione su di essa

— VishalDream
fonte

5

È chiamare una funzione da un iFrame, non ottenere un riferimento all'elemento.

— Nick Mitchell,

3

Le risposte sopra hanno dato buone soluzioni usando Javscript. Ecco una semplice soluzione jQuery:

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

Il trucco qui è il .contents()metodo di jQuery , a differenza del .children()quale può ottenere solo elementi HTML, .contents()può ottenere sia nodi di testo che elementi HTML. Ecco perché si può ottenere il contenuto del documento di un iframe utilizzandolo.

Ulteriori letture su jQuery .contents(): .contents ()

Si noti che l'iframe e la pagina devono trovarsi sullo stesso dominio.

— SkuraZZ
fonte

1

Nessuna delle altre risposte funzionava per me. Ho finito per creare una funzione all'interno del mio iframe che restituisce l'oggetto che stavo cercando:

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

Quindi chiamate quella funzione in questo modo per recuperare l'elemento:

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

— Craned
fonte

0

Se iframe non si trova nello stesso dominio in modo tale da non poter ottenere l'accesso ai suoi interni dall'elemento principale ma è possibile modificare il codice sorgente dell'iframe, è possibile modificare la pagina visualizzata dall'iframe per inviare messaggi alla finestra padre, che consente per condividere informazioni tra le pagine. Alcune fonti:

— Jose V
fonte

-3

Il codice seguente ti aiuterà a scoprire i dati iframe.

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

— nagato cenere
fonte