Come accedere al contenuto di un iframe con jQuery?

116

Come posso accedere al contenuto di un iframe con jQuery? Ho provato a farlo, ma non ha funzionato:

contenuto iframe: <div id="myContent"></div>

jQuery: $("#myiframe").find("#myContent")

Come posso accedere myContent?

Simile a jquery / javascript: accesso ai contenuti di un iframe ma la risposta accettata non è quella che stavo cercando.

jquery iframe

— mbillard
fonte

Ho appena scoperto che la variabile $ incorporata nella console di Firefox non sembra affatto un jQuery completo. (L'ho capito dopo aver realizzato che non ho nemmeno la variabile jQuery, quindi ho capito che non avevo caricato il codice sorgente di jQuery).

— eel ghEEz

Risposte:

214

Devi usare il contents()metodo:

$("#myiframe").contents().find("#myContent")

Fonte: http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

Documento API: https://api.jquery.com/contents/

— mbillard
fonte

dammi errore: Errore: autorizzazione negata per accedere alla proprietà 'ownerDocument'

— Imran Khan

ime: Probabilmente ti dà un errore per i seguenti motivi: 1) Iframe non appartiene allo stesso dominio. 2) Stai tentando di leggerlo prima dell'evento di caricamento Iframe.

— iMatoria

C'è un modo per verificare se il contenuto dell'iframe proviene dallo stesso dominio, prima di tentare di accedervi e ricevere un errore?

— Kamafeather

L'URL di origine è danneggiato.

— karthzDIGI

@jperezmartin: dovrai utilizzare una libreria javascript che trasferirà le informazioni tra la pagina principale e l'iframe. Fondamentalmente è stato negato dal browser a causa della funzionalità Cross Browser. Mi dispiace, non sono a conoscenza di tale libreria perché non l'ho mai richiesta.

— iMatoria

<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">

$(function() {

    //here you have the control over the body of the iframe document
    var iBody = $("#iView").contents().find("body");

    //here you have the control over any element (#myContent)
    var myContent = iBody.find("#myContent");

});

</script>
</head>
<body>
  <iframe src="mifile.html" id="iView" style="width:200px;height:70px;border:dotted 1px red" frameborder="0"></iframe>
</body>
</html>

— andres descalzo
fonte

Se l'origine dell'iframe è un dominio esterno, i browser nascondono i contenuti dell'iframe (stessa politica di origine). Una soluzione alternativa consiste nel salvare i contenuti esterni in un file, ad esempio (in PHP):

<?php
    $contents = file_get_contents($external_url);
    $res = file_put_contents($filename, $contents);
?>

quindi, ottieni il nuovo contenuto del file (stringa) e analizzalo in html, ad esempio (in jquery):

$.get(file_url, function(string){
    var html = $.parseHTML(string);
    var contents = $(html).contents();
},'html');

— fireb86
fonte