¿Cómo acceder al contenido de un iframe con jQuery?

116

¿Cómo puedo acceder al contenido de un iframe con jQuery? Intenté hacer esto, pero no funcionó:

contenido de iframe: <div id="myContent"></div>

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

¿Cómo puedo acceder myContent?

Similar a jquery / javascript: acceder al contenido de un iframe pero la respuesta aceptada no es lo que estaba buscando.

jquery iframe

— mbillard
fuente

Acabo de descubrir que la variable $ incorporada en la consola de Firefox no parece un jQuery completo en absoluto. (Me di cuenta de esto después de darme cuenta de que tampoco tengo la variable jQuery, luego de pensar que no cargué el código fuente de jQuery).

— eel ghEEz

Respuestas:

214

Tienes que usar el contents()método:

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

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

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

— mbillard
fuente

dame error: Error: Permiso denegado para acceder a la propiedad 'ownerDocument'

— Imran Khan

ime: Probablemente le esté dando un error debido a las siguientes razones: 1) Iframe no pertenece al mismo dominio. 2) Está intentando leerlo antes del evento de carga de Iframe.

— iMatoria

¿Hay alguna forma de verificar si el contenido del iframe es del mismo dominio, antes de intentar acceder a él y obtener un error?

— Kamafeather

La URL de origen no funciona.

— karthzDIGI

@jperezmartin: Tendrá que usar alguna biblioteca javascript que transferirá información entre la página principal y el iframe. Básicamente, el navegador lo ha negado debido a la funcionalidad del navegador cruzado. Lo siento, no tengo conocimiento de ninguna biblioteca de este tipo porque nunca la necesité.

— 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
fuente

Si la fuente del iframe es un dominio externo, los navegadores ocultarán el contenido del iframe (Política del mismo origen). Una solución alternativa es guardar el contenido externo en un archivo, por ejemplo (en PHP):

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

luego, obtenga el nuevo contenido del archivo (cadena) y analícelo en html, por ejemplo (en jquery):

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

— fireb86
fuente