Como acessar o conteúdo de um iframe com jQuery?

116

Como posso acessar o conteúdo de um iframe com jQuery? Tentei fazer isso, mas não funcionou:

conteúdo iframe: <div id="myContent"></div>

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

Como posso acessar myContent?

Semelhante a jquery / javascript: acesso ao conteúdo de um iframe, mas a resposta aceita não é a que eu procurava.

jquery iframe

— mbillard
fonte

Acabei de descobrir que a variável $ embutida no console do Firefox não se parece em nada com um jQuery completo. (Eu percebi isso depois de perceber que também não tenho a variável jQuery e, em seguida, descobri que não carreguei o código-fonte do jQuery).

— enguia ghEEz

Respostas:

214

Você tem que usar o contents()método:

$("#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

dar-me o erro: Erro: permissão negada para acessar a propriedade 'ownerDocument'

— Imran Khan

ime: Provavelmente está apresentando um erro pelos seguintes motivos: 1) Iframe não pertence ao mesmo domínio. 2) Você está tentando ler antes do evento de carregamento do Iframe.

— iMatoria

Existe uma maneira de verificar se o conteúdo do iframe é do mesmo domínio antes de tentar acessá-lo e obter um erro?

— Kamafeather

O url de origem está corrompido.

— karthzDIGI

@jperezmartin: Você terá que usar alguma biblioteca javascript que irá transferir informações entre a página principal e o iframe. Basicamente, foi negado pelo navegador por causa da funcionalidade Cross Browser. Lamento, mas não conheço nenhuma dessas bibliotecas porque nunca a solicitei.

— iMatoria de

<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 a fonte do iframe for um domínio externo, os navegadores irão ocultar o conteúdo do iframe (Política de Mesma Origem). Uma solução alternativa é salvar o conteúdo externo em um arquivo, por exemplo (em PHP):

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

em seguida, obtenha o novo conteúdo do arquivo (string) e analise-o em html, por exemplo (em jquery):

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

— fireb86
fonte