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