Chamando código JavaScript em um iframe da página pai

Basicamente, eu tenho um iframeincorporado em uma página e iframetem algumas rotinas de JavaScript que eu preciso chamar a partir da página pai.

Agora, o oposto é bastante simples, como você só precisa ligar parent.functionName(), mas, infelizmente, eu preciso exatamente o oposto disso.

Observe que meu problema não é alterar o URL de origem do iframe, mas invocar uma função definida no iframe.

Suponha que o ID do seu iFrame seja "targetFrame" e a função que você deseja chamar é targetFunction():

document.getElementById('targetFrame').contentWindow.targetFunction();

Você também pode acessar o quadro usando em window.framesvez de document.getElementById.

// this option does not work in most of latest versions of chrome and Firefox
window.frames[0].frameElement.contentWindow.targetFunction(); 

Existem algumas peculiaridades a serem observadas aqui.

1. HTMLIFrameElement.contentWindowé provavelmente a maneira mais fácil, mas não é uma propriedade padrão e alguns navegadores não a suportam, principalmente os mais antigos. Isso ocorre porque o padrão HTML do nível 1 do DOM não tem nada a dizer sobre o windowobjeto.

2. Você também pode tentar HTMLIFrameElement.contentDocument.defaultView, que alguns navegadores mais antigos permitem, mas o IE não. Mesmo assim, o padrão não diz explicitamente que você recupera o windowobjeto, pelo mesmo motivo que (1), mas você pode escolher algumas versões extras do navegador aqui, se quiser.

3. window.frames['name']retornar a janela é a interface mais antiga e, portanto, mais confiável. Mas você precisa usar um name="..."atributo para obter um quadro pelo nome, que é um pouco feio / descontinuado / de transição. ( id="..."seria melhor, mas o IE não gosta disso.)

4. window.frames[number]também é muito confiável, mas saber o índice certo é o truque. Você pode se safar disso, por exemplo. se você sabe que possui apenas um iframe na página.

5. É perfeitamente possível que o iframe filho ainda não tenha sido carregado ou que algo deu errado para torná-lo inacessível. Você pode achar mais fácil reverter o fluxo de comunicações: ou seja, faça com que o iframe filho notifique seu window.parentscript quando terminar de carregar e estiver pronto para ser chamado de volta. Ao passar um de seus próprios objetos (por exemplo, uma função de retorno de chamada) para o script pai, esse pai pode se comunicar diretamente com o script no iframe sem ter que se preocupar com o que HTMLIFrameElement está associado.

iframeÉ possível chamar uma função JS pai de , mas somente quando o pai e a página carregada no iframesão do mesmo domínio, por exemplo, abc.com, e ambos estão usando o mesmo protocolo, ou seja, ambos estão em http://ou https://.

A chamada falhará nos casos mencionados abaixo:

1. A página pai e a página iframe são de domínio diferente.
   
2. Eles estão usando protocolos diferentes, um está em http: // e o outro está em https: //.
   

Qualquer solução alternativa para essa restrição seria extremamente insegura.

Por exemplo, imagine que eu registrei o domínio superwinningcontest.com e enviei links para os e-mails das pessoas. Quando eles carregavam a página principal, eu podia ocultar alguns iframesegundos e ler o feed do Facebook, verificar transações recentes da Amazon ou do PayPal ou - se eles usassem um serviço que não implementasse segurança suficiente - transferir dinheiro da conta contas. É por isso que o JavaScript é limitado ao mesmo domínio e ao mesmo protocolo.

No IFRAME, torne sua função pública no objeto de janela:

window.myFunction = function(args) {
   doStuff();
}

Para acessar a partir da página pai, use este:

var iframe = document.getElementById("iframeId");
iframe.contentWindow.myFunction(args);

Se o destino do iFrame e o documento contido estiverem em um domínio diferente, os métodos publicados anteriormente podem não funcionar, mas existe uma solução:

Por exemplo, se o documento A contiver um elemento iframe que contém o documento B e o script no documento A chamar postMessage () no objeto Window do documento B, um evento de mensagem será disparado nesse objeto, marcado como originário da Janela de documento A. O script no documento A pode se parecer com:

var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello world', 'http://b.example.org/');

Para registrar um manipulador de eventos para eventos recebidos, o script usaria addEventListener () (ou mecanismos semelhantes). Por exemplo, o script no documento B pode se parecer com:

window.addEventListener('message', receiver, false);
function receiver(e) {
  if (e.origin == 'http://example.com') {
    if (e.data == 'Hello world') {
      e.source.postMessage('Hello', e.origin);
    } else {
      alert(e.data);
    }
  }
}

Esse script verifica primeiro o domínio esperado e, em seguida, analisa a mensagem, que é exibida para o usuário ou responde enviando uma mensagem de volta ao documento que a enviou em primeiro lugar.

via http://dev.w3.org/html5/postmsg/#web-messaging

Só para constar, encontrei o mesmo problema hoje, mas desta vez a página foi incorporada a um objeto, não a um iframe (já que era um documento XHTML 1.1). Veja como ele funciona com objetos:

document
  .getElementById('targetFrame')
  .contentDocument
  .defaultView
  .targetFunction();

(desculpe pelas quebras de linha feias, não cabiam em uma única linha)

O IFRAME deve estar na frames[]coleção. Use algo como

frames['iframeid'].method();

Quirksmode tinha um post sobre isso .

Como a página agora está quebrada e acessível apenas via archive.org, eu a reproduzi aqui:

IFrames

Nesta página, dou uma breve visão geral do acesso a iframes na página em que estão. Não é de surpreender que haja algumas considerações sobre o navegador.

Um iframe é um quadro embutido, um quadro que, embora contenha uma página completamente separada com sua própria URL, é colocado dentro de outra página HTML. Isso oferece possibilidades muito agradáveis ​​em web design. O problema é acessar o iframe, por exemplo, para carregar uma nova página nele. Esta página explica como fazê-lo.

Moldura ou objeto?

A questão fundamental é se o iframe é visto como um quadro ou como um objeto.

• Conforme explicado nas páginas Introdução aos quadros , se você usar quadros, o navegador criará uma hierarquia de quadros para você ( top.frames[1].frames[2]e tal). O iframe se encaixa nessa hierarquia de quadros?
• Ou o navegador vê um iframe apenas como outro objeto, um objeto que possui uma propriedade src? Nesse caso, temos que usar uma chamada DOM padrão (como document.getElementById('theiframe'))acessá-la. Em geral, os navegadores permitem ambas as visualizações em iframes 'reais' (codificados)), mas os iframes gerados não podem ser acessados ​​como quadros.

Atributo NAME

A regra mais importante é fornecer qualquer iframe que você criar um nameatributo, mesmo se você também usar um id.

<iframe src="iframe_page1.html"
    id="testiframe"
    name="testiframe"></iframe>

A maioria dos navegadores precisa do nameatributo para tornar o iframe parte da hierarquia de quadros. Alguns navegadores (principalmente o Mozilla) precisam idtornar o iframe acessível como um objeto. Ao atribuir os dois atributos ao iframe, você mantém suas opções em aberto. Mas nameé muito mais importante que id.

Acesso

Você acessa o iframe como um objeto e altera o seu srcou acessa o iframe como um quadro e altera o seu location.href.

document.getElementById ('iframe_id'). src = 'newpage.html'; frames ['iframe_name']. location.href = 'newpage.html'; A sintaxe do quadro é um pouco preferível porque o Opera 6 suporta, mas não a sintaxe do objeto.

Acessando o iframe

Portanto, para uma experiência completa em vários navegadores, você deve dar um nome ao iframe e usar o

frames['testiframe'].location.href

sintaxe. Tanto quanto sei, isso sempre funciona.

Acessando o documento

O acesso ao documento dentro do iframe é bastante simples, desde que você use o nameatributo Para contar o número de links no documento no iframe, faça frames['testiframe'].document.links.length.

Iframes gerados

Porém, quando você gera um iframe por meio do DOM do W3C, o iframe não é inserido imediatamente na framesmatriz e a frames['testiframe'].location.hrefsintaxe não funciona imediatamente. O navegador precisa de um tempo para que o iframe apareça na matriz, tempo durante o qual nenhum script pode ser executado.

A document.getElementById('testiframe').srcsintaxe funciona bem em todas as circunstâncias.

O targetatributo de um link também não funciona com iframes gerados, exceto no Opera, mesmo que eu tenha dado ao iframe gerado a namee an id.

A falta de targetsuporte significa que você deve usar o JavaScript para alterar o conteúdo de um iframe gerado, mas como você precisa do JavaScript para gerá-lo em primeiro lugar, não vejo isso como um problema.

Tamanho do texto em iframes

Um curioso bug do Explorer 6:

Quando você altera o tamanho do texto no menu Exibir, os tamanhos de texto em iframes são alterados corretamente. No entanto, este navegador não altera as quebras de linha no texto original, para que parte do texto fique invisível ou quebras de linha possam ocorrer enquanto a linha ainda pode conter outra palavra.

Encontrei uma solução bastante elegante.

Como você disse, é bastante fácil executar o código localizado no documento pai. E essa é a base do meu código, faça exatamente o oposto.

Quando meu iframe é carregado, chamo uma função localizada no documento pai, passando como argumento uma referência a uma função local, localizada no documento do iframe. O documento pai agora tem acesso direto à função do iframe por meio dessa referência.

Exemplo:

No pai:

function tunnel(fn) {
    fn();
}

No iframe:

var myFunction = function() {
    alert("This work!");
}

parent.tunnel(myFunction);

Quando o iframe for carregado, ele chamará parent.tunnel (YourFunctionReference), que executará a função recebida no parâmetro

Simples assim, sem ter que lidar com todos os métodos fora dos padrões dos vários navegadores.

Algumas dessas respostas não abordam a questão do CORS ou não tornam óbvio onde você coloca os trechos de código para tornar a comunicação possível.

Aqui está um exemplo concreto. Digamos que eu queira clicar em um botão na página pai e fazer isso dentro do iframe. Aqui está como eu faria isso.

parent_frame.html

<button id='parent_page_button' onclick='call_button_inside_frame()'></button>

function call_button_inside_frame() {
   document.getElementById('my_iframe').contentWindow.postMessage('foo','*');
}

iframe_page.html

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
    {
      if(event) {
        click_button_inside_frame();
    }
}

function click_button_inside_frame() {
   document.getElementById('frame_button').click();
}

Para ir na outra direção (clique no botão dentro do iframe para chamar o método fora do iframe), basta alternar para o local do snippet de código e alterar isso:

document.getElementById('my_iframe').contentWindow.postMessage('foo','*');

para isso:

window.parent.postMessage('foo','*')

Continuando com a resposta de JoelAnair :

Para maior robustez, use o seguinte:

var el = document.getElementById('targetFrame');

if(el.contentWindow)
{
   el.contentWindow.targetFunction();
}
else if(el.contentDocument)
{
   el.contentDocument.targetFunction();
}

Trabalho como charme :)

Seguindo a resposta de Nitin Bansal

e para ainda mais robustez:

function getIframeWindow(iframe_object) {
  var doc;

  if (iframe_object.contentWindow) {
    return iframe_object.contentWindow;
  }

  if (iframe_object.window) {
    return iframe_object.window;
  } 

  if (!doc && iframe_object.contentDocument) {
    doc = iframe_object.contentDocument;
  } 

  if (!doc && iframe_object.document) {
    doc = iframe_object.document;
  }

  if (doc && doc.defaultView) {
   return doc.defaultView;
  }

  if (doc && doc.parentWindow) {
    return doc.parentWindow;
  }

  return undefined;
}

e

...
var el = document.getElementById('targetFrame');

var frame_win = getIframeWindow(el);

if (frame_win) {
  frame_win.targetFunction();
  ...
}
...

       $("#myframe").load(function() {
            alert("loaded");
        });

Mesmas coisas, mas um pouco mais fácil, será Como atualizar a página pai da página no iframe . Basta chamar a função da página pai para chamar a função javascript para recarregar a página:

window.location.reload();

Ou faça isso diretamente da página no iframe:

window.parent.location.reload();

Ambos os trabalhos.

Tente apenas parent.myfunction()

Se você deseja chamar a função JavaScript no pai a partir do iframe gerado por outra função, ex shadowbox ou lightbox.

Você deve tentar fazer uso do windowobjeto e chamar a função pai:

window.parent.targetFunction();

Use o seguinte para chamar a função de um quadro na página pai

parent.document.getElementById('frameid').contentWindow.somefunction()