Ottieni elementi dall'interno di un iFrame


Risposte:


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.


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>

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

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


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.


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

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:


-3

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

let iframe = document.getElementById('frameId');
let innerDoc = iframe.contentDocument || iframe.contentWindow.document;
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.