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.

javascript iframe getelementbyid cycero
fonte

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).

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

Selecionando um elemento no iFrame jQuery

Respostas: