Come ottenere il contenuto del corpo di un iframe in Javascript?

154

<iframe id="id_description_iframe" class="rte-zone" height="200" frameborder="0" title="description">
  <html>
    <head></head>
    <body class="frameBody">
      test<br/>
    </body>
  </html>
</iframe>

Quello che voglio ottenere è:

test<br/>

javascript html iframe

— Oh mio Dio
fonte

52

Nota importante: non è possibile accedere al contenuto di un iFrame se è interdominio. Vedi la politica sulla stessa origine .

— HellaMad

154

La domanda esatta è come farlo con JavaScript puro non con jQuery.

Ma uso sempre la soluzione che si trova nel codice sorgente di jQuery. È solo una riga di JavaScript nativo.

Per me è il migliore, di facile lettura e anche per quanto ne so la via più breve per ottenere il contenuto iframe.

Per prima cosa prendi il tuo iframe

var iframe = document.getElementById('id_description_iframe');

// or
var iframe = document.querySelector('#id_description_iframe');

E poi usa la soluzione di jQuery

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

Funziona anche in Internet Explorer che fa questo trucco durante la contentWindowproprietà iframedell'oggetto. La maggior parte degli altri browser utilizza la contentDocumentproprietà e questo è il motivo per cui proviamo prima questa proprietà in questa condizione OR. Se non è impostato, provare contentWindow.document.

Seleziona gli elementi in iframe

Quindi di solito puoi usare getElementById()o anche querySelectorAll()selezionare l'elemento DOM da iframeDocument:

if (!iframeDocument) {
    throw "iframe couldn't be found in DOM.";
}

var iframeContent = iframeDocument.getElementById('frameBody');

// or
var iframeContent = iframeDocument.querySelectorAll('#frameBody');

Chiama le funzioni nell'iframe

Ottieni solo l' windowelemento da iframechiamare alcune funzioni globali, variabili o intere librerie (ad es. jQuery):

var iframeWindow = iframe.contentWindow;

// you can even call jQuery or other frameworks
// if it is loaded inside the iframe
iframeContent = iframeWindow.jQuery('#frameBody');

// or
iframeContent = iframeWindow.$('#frameBody');

// or even use any other global variable
iframeWindow.myVar = window.myVar;

// or call a global function
var myVar = iframeWindow.myFunction(param1 /*, ... */);

Nota

Tutto ciò è possibile se si osserva la politica della stessa origine .

— algoritmo
fonte

2

iframe non è definito qui, o dovresti scrivere il codice completo o non scrivere jQuery con esso

— Tarun Gupta,

13

mi scusi, ma la riga di codice è un estratto del codice jquery e il blocco di codice è il mio codice di esempio. Il resto dovrebbe uscire. l'unica cosa che ti manca è la variabile iframe. E non posso sapere dove sia il tuo iframe o come sia il suo ID.

— algoritmo

5

Potresti per favore aggiungere un avviso all'inizio della risposta che questo non funziona se l'iframe ha un telecomando remoto? Se sbaglio, apprezzerei se potessi indicarmi come posso ancora ottenere il contenuto iframe senza inviare un'altra richiesta HTTP (non possibile perché ho bisogno di javascript eseguito per costruire il contenuto iframe e non voglio distribuire un secondo ambiente javascript se evitabile).

— Zackline,

1

Ho un tale avvertimento. Ma alla fine della mia spiegazione. Devi osservare la stessa politica di origine. È tutto.

— algoritmo

2

Per far funzionare quanto sopra, ho dovuto racchiuderlo in document.querySelector('#id_description_iframe').onload = function() {... Spero che aiuti qualcuno.

— user3442612

71

Utilizzando JQuery, prova questo:

$("#id_description_iframe").contents().find("body").html()

— Michael Adedayo
fonte

27

Non funziona perché "Domini, protocolli e porte devono corrispondere". : Tentativo non sicuro di JavaScript per accedere al frame con URL

— Ionică Bizău

2

Come accennato, funzionerebbe se i domini corrispondono. Cordiali saluti, ho appena scoperto che $ ("# id_description_iframe #id_of_iframe_body"). Html () funziona in Chrome ma non in tutte le versioni di Firefox, e quindi usare quanto sopra va bene. Vale a dire $ ("# id_description_iframe #id_of_iframe_body"). Contents (). Find ("body"). Html () ha funzionato in entrambi

— hobailey

41

Funziona perfettamente per me :

document.getElementById('iframe_id').contentWindow.document.body.innerHTML;

— bizzr3
fonte

3

È strano, ma per me .bodynon funziona. Comunque lo .getElementsByTagName('body')[0]fa.

— Jenny O'Reilly,

non è ".body", solo "body". rimuovi il punto

— Arjun,

1

questa dovrebbe essere la risposta se si è alla vaniglia javascript.

— Jovanni G,

23

AFAIK, un Iframe non può essere utilizzato in questo modo. Devi puntare il suo attributo src su un'altra pagina.

Ecco come ottenere il contenuto del suo corpo usando javascript piano vecchio. Funziona con IE e Firefox.

function getFrameContents(){
   var iFrame =  document.getElementById('id_description_iframe');
   var iFrameBody;
   if ( iFrame.contentDocument ) 
   { // FF
     iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
   }
   else if ( iFrame.contentWindow ) 
   { // IE
     iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
   }
    alert(iFrameBody.innerHTML);
 }

— Jose Basilio
fonte

1

lo fa nel safari (es. filiale)

— Andrei Cristian Prodan,

con problemi tra domini, ha impedito a un frame con origine " someOther.com " di accedere a un frame tra origini.

— Lannyf,

10

utilizzare contentin iframe con JS:

document.getElementById('id_iframe').contentWindow.document.write('content');

— CoursesWeb
fonte

5

Penso che posizionare il testo tra i tag sia riservato ai browser che non possono gestire iframe, ad es.

<iframe src ="html_intro.asp" width="100%" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

Si utilizza l'attributo 'src' per impostare l'origine dell'ifml iframe ...

Spero che aiuti :)

3

Il seguente codice è compatibile con più browser. Funziona in IE7, IE8, Fx 3, Safari e Chrome, quindi non è necessario gestire problemi tra browser. Non testato in IE6.

<iframe id="iframeId" name="iframeId">...</iframe>

<script type="text/javascript">
    var iframeDoc;
    if (window.frames && window.frames.iframeId &&
        (iframeDoc = window.frames.iframeId.document)) {
        var iframeBody = iframeDoc.body;
        var ifromContent = iframeBody.innerHTML;
    }
</script>

— nekno
fonte

L'html di seguito ha funzionato per me in Chrome 7 su Mac. Ho testato questo post originale in Chrome 6 su Windows e ha funzionato bene. <html> <head> </head> <body> <iframe id = "iframeId" name = "iframeId"> ... </iframe> <script type = "text / javascript"> var iframeDoc; if (window.frames && window.frames.iframeId && window.frames.iframeId.document) {window.frames.iframeId.document.body.innerHTML = "<h1> testing </h1>"; } </script> </body> </html>

— nekno

1

window.frames.iframeId.documentè indefinito per me. (Ubuntu 13.04, Chrome)

— Ionică Bizău

2

Chalkey è corretto, è necessario utilizzare l'attributo src per specificare la pagina da contenere nell'iframe. Se lo fai, e il documento nell'iframe si trova nello stesso dominio del documento principale, puoi usare questo:

var e = document.getElementById("id_description_iframe");
if(e != null) {
   alert(e.contentWindow.document.body.innerHTML);
}

Ovviamente puoi fare qualcosa di utile con i contenuti invece di metterli in allerta.

— Graham Clark
fonte

1

Per ottenere il contenuto del corpo da JavaScript, ho provato il seguente codice:

var frameObj = document.getElementById('id_description_iframe');

var frameContent = frameObj.contentWindow.document.body.innerHTML;

dove "id_description_iframe" è l'id del tuo iframe. Questo codice funziona bene per me.

— sunakshi
fonte

2

Inserisci la tua risposta sempre nel contesto anziché semplicemente incollare il codice. Vedi qui per maggiori dettagli.

— gehbiszumeis,

1

Le risposte di solo codice sono considerate di bassa qualità: assicurati di fornire una spiegazione su cosa fa il tuo codice e su come risolve il problema. Aiuterà il richiedente e i futuri lettori sia se è possibile aggiungere ulteriori informazioni nel tuo post. Vedi anche Spiegare le risposte interamente basate su codice: meta.stackexchange.com/questions/114762/…

— borchvm