como acessar a página pai do iFrame usando jquery?

267

Eu tenho um iframe e, para acessar o elemento pai, implementei o seguinte código:

window.parent.document.getElementById('parentPrice').innerHTML

Como obter o mesmo resultado usando jquery?
ATUALIZAÇÃO : Ou como acessar a página pai do iFrame usando jquery?

javascript jquery iframe Amr Elgarhy
fonte
Veja também stackoverflow.com/questions/12114243/…
Alexis Wilke 6/16

Respostas:

489

Para encontrar no pai do iFrame, use:

$('#parentPrice', window.parent.document).html();

O segundo parâmetro para o wrapper $ () é o contexto no qual pesquisar. O padrão é documentar.

Pim Jager
fonte
18
Legal - você agradeceu antes de ele agradecer. StackOverflow tendo problemas com fusos horários, talvez?
belugabob
21
Você também pode fazer: $ (window.parent.document) .find ("# parentPrice"). Html ();
jhorback
@belugabob É culpa de um wizzard.
Erik Escobedo
1
Para aqueles que lançaram um windoid com window.open, não se esqueça do antigo padrão JS window.opener.document. $ ("# someDiv", window.opener.document) funciona.
jjohn
2
Isso funcionará apenas se a fonte do iframe tiver o jQuery carregado. Na minha experiência, a fonte iframe não teria jQuery, mas a necessidade de chamar uma das funções jQuery dos pais é frequentemente necessária. Para fazer isso, use: window.document. $ ("# ParentPrice"). Html () Essa foi a resposta que Álvaro G. Vicario postou.
21414 David Kinkead
39

como acessar a página pai do iFrame usando jquery

window.parent.document.

O jQuery é uma biblioteca sobre JavaScript, não um substituto completo para ele. Você não precisa substituir todas as últimas expressões JavaScript por algo que envolva $.

bobince
fonte
6
+1. O jQuery é ótimo, mas muitas respostas para problemas simples parecem ser 'use jQuery'. Se você estiver carregando a biblioteca de qualquer maneira, tudo bem, mas não carregue uma tarefa. Além disso, as pessoas parecem preocupadas com o JS perf e, em seguida, usam uma API em cima do JS para fazer as coisas facilmente possíveis (e possivelmente mais rápidas) sem a API.
Grant Wagner
1
@ Granant Embora eu sonho com o jQuery se tornando um código nativo nos navegadores.
Dan Blows
3
@ Blowski: esse é o meu pesadelo! O jQuery contém muitos códigos extremamente complexos e frágeis do tipo "faça o que eu quero dizer" que seriam completamente inapropriados para a API oficial.
bobince
1
@bince: Claramente, você sempre deve substituir todo o Javascript pelo jQuery. É como bacon; não há situação em que menos seja melhor. ;)
MW.
2
O OP já tinha window.parent.document, então isso não respondeu nada. E imagine que a lógica do seletor seja muito mais complexa que a ID de um elemento, uma situação em que o jQuery é extremamente útil. Sinto que a pergunta é "como digo 'olá' em francês?" e esta resposta é "fala alemão".
Concessão #
13

Se você precisar encontrar a instância do jQuery no documento pai (por exemplo, para chamar uma função de utilitário fornecida por um plug-in), use uma destas sintaxes:

  • window.parent.$
  • window.parent.jQuery

Exemplo:

window.parent.$.modal.close();

O jQuery é anexado ao windowobjeto e é isso que window.parenté.

Álvaro González
fonte
Estou usando meu iframe como um controle de usuário. Isso me permite mantê-lo limpo e agradável.
Dan Randolph
11

Você pode acessar elementos da janela pai a partir de um iframe usando o window.parentseguinte:

// using jquery    
window.parent.$("#element_id");

Qual é o mesmo que: 

// pure javascript
window.parent.document.getElementById("element_id");

E se você tiver mais de um iframes aninhados e quiser acessar o iframe mais alto, poderá usar o window.topseguinte:

// using jquery
window.top.$("#element_id");

Qual é o mesmo que: 

// pure javascript
window.top.document.getElementById("element_id");
Amr
fonte
7

na janela pai colocar:

<script>
function ifDoneChildFrame(val)
{
   $('#parentPrice').html(val);
}
</script>

e no arquivo iframe src, coloque:

<script>window.parent.ifDoneChildFrame('Your value here');</script>
stieven
fonte
5

Sim, funciona para mim também.

Nota: precisamos usar window.parent.document

    $("button", window.parent.document).click(function()
    {
        alert("Functionality defined by def");
    });
Yogesh Gandhi
fonte
5

Está trabalhando para mim com um pouco de reviravolta. No meu caso, eu tenho que preencher o valor de POPUP JS para o formulário PARENT WINDOW.

Então eu tenho usado $('#ee_id',window.opener.document).val(eeID);

Excelente!!!

Hitesh Patel
fonte
3

Pode ser um pouco tarde para o jogo aqui, mas acabei de descobrir este fantástico plugin do jQuery https://github.com/mkdynamic/jquery-popupwindow . Ele basicamente usa um evento de retorno de chamada onUnload, portanto, basicamente escuta o fechamento da janela filho e executará todas as coisas necessárias nesse momento. Portanto, não há realmente necessidade de escrever qualquer JS na janela filho para retornar ao pai.

cj5
fonte
1

Existem várias maneiras de fazer isso.

I) Obter pai principal diretamente.

para exa. eu quero substituir minha página filha para iframe então

var link = '<%=Page.ResolveUrl("~/Home/SubscribeReport")%>';
top.location.replace(link);

aqui top.location obtém o pai diretamente.

II) obter os pais um a um,

var element = $('.iframe:visible', window.parent.document);

aqui, se você tiver mais de um iframe, especifique um ativo ou visível.

você também pode fazer isso para obter mais pais,

var masterParent = element.parent().parent().parent()

III) obter pai pelo identificador.

var myWindow = window.top.$("#Identifier")
Bharat
fonte