Selecionando um elemento no iFrame jQuery

122

Em nosso aplicativo, analisamos uma página da web e a carregamos em outra página em um iFrame. Todos os elementos nessa página carregada têm seus tokenid-s. Eu preciso selecionar os elementos por esses tokenid-s. Meios - clico em um elemento na página principal e seleciono o elemento correspondente na página no iFrame. Com a ajuda do jQuery, estou fazendo da seguinte maneira:

function selectElement(token) {
     $('[tokenid=' + token + ']').addClass('border'); 
}

No entanto, com esta função, posso selecionar apenas os elementos na página atual, não no iFrame. Alguém poderia me dizer como posso selecionar os elementos no iFrame carregado?

Obrigado.

cycero
fonte

Respostas:

157
var iframe = $('iframe'); // or some other selector to get the iframe
$('[tokenid=' + token + ']', iframe.contents()).addClass('border');

Observe também que, se srceste iframe estiver apontando para um domínio diferente, por motivos de segurança, você não poderá acessar o conteúdo desse iframe em javascript.

Darin Dimitrov
fonte
8
Lembre-se de que $ ('iframe') não retorna o iframe diretamente. Você precisa retirá-lo da matriz.
21711 McKayla
Obrigado pela disposição de ajudar. Mas isso não parece funcionar.
cycero
3
@cycero, deve funcionar. Você está gerando esse iframe dinamicamente? Não esqueça que, se você apontar o elemento src desse iframe para outro domínio que não o seu devido a razões de segurança, não poderá acessar o conteúdo.
Darin Dimitrov
Não o carrego de um domínio diferente, mas da mesma pasta. O conteúdo do iFrame está sendo gerado dinamicamente e armazenado como um arquivo no servidor. Em seguida, esse arquivo está sendo carregado no iFrame.
cycero
@cycero, atualizei minha resposta. Tente passariframe.contents()
Darin Dimitrov
52

Dê uma olhada neste post: http://praveenbattula.blogspot.com/2009/09/access-iframe-content-using-jquery.html

$("#iframeID").contents().find("[tokenid=" + token + "]").html();

Coloque seu seletor no método de localização.

No entanto, isso pode não ser possível se o iframe não vier do seu servidor. Outras postagens falam sobre erros de permissão negada.

jQuery / JavaScript: acessando o conteúdo de um iframe

Kevin Bowersox
fonte
Isso funciona em termos de obter o HTML do elemento, mas como posso adicionar uma classe CSS ao elemento selecionado? $ ("# iframeDiv"). contents (). find ("[tokenid =" + token + "]"). addClass ("border"); parece não funcionar.
cycero
1
Você recebe algum erro de permissão negada? Você pode me dar o html do iframe?
precisa
Não, nenhuma permissão negou problemas.
113811 cycero
20

quando o documento estiver pronto, isso não significa que o iframe também esteja pronto;
portanto , você deve ouvir o evento de carregamento do iframe e acessar seu conteúdo:

$(function() {
    $("#my-iframe").bind("load",function(){
        $(this).contents().find("[tokenid=" + token + "]").html();
    });
});
Alnamrouti com tarifa
fonte
-3

Se o caso estiver acessando o IFrame por meio do console, por exemplo, Ferramentas de Desenvolvimento do Chrome, basta selecionar o contexto das solicitações do DOM por meio do menu suspenso (veja a figura).

Ferramentas de desenvolvimento do Chrome - Selecionando o iFrame

tibersky
fonte
-9

aqui é simples o JQuery fazer isso para tornar a div arrastável apenas no contêiner:

$("#containerdiv div").draggable( {containment: "#containerdiv ", scroll: false} );
Rajasekharreddy Kadasani
fonte