Quero chamar uma função JavaScript da janela pai de um iframe.
<script>
function abc()
{
alert("sss");
}
</script>
<iframe id="myFrame">
<a onclick="abc();" href="#">Call Me</a>
</iframe>
javascript
iframe
onclick
Arjun Singh
fonte
fonte
Respostas:
Consulte window.parent
Retorna uma referência ao pai da janela ou subquadro atual.
Se uma janela não tiver um pai, sua propriedade pai será uma referência a si mesma.
Quando uma janela é carregado em um
<iframe>
,<object>
ou<frame>
, o seu pai é a janela com o elemento de incorporação da janela.fonte
alert
será invocado;alert
função dos pais ou função iframealert
, casoparent.abc();
seja chamada em iframe?window.postMessage()
(ouwindow.parent.postMessage()
) existe. Verifique @Andrii respostaRecentemente, tive que descobrir por que isso também não funcionou.
O javascript que você deseja chamar do iframe filho precisa estar na cabeça dos pais. Se estiver no corpo, o script não estará disponível no escopo global.
Espero que isso ajude qualquer pessoa que se deparar com esse problema novamente.
fonte
Window.postMessage ()
Este método habilita a
cross-origin
comunicação com segurança .E se você tiver acesso ao código da página pai, qualquer método pai poderá ser chamado, assim como qualquer dado transmitido diretamente
Iframe
. Aqui está um pequeno exemplo:Página principal:
Código Iframe:
ATUALIZAÇÕES:
Nota de segurança:
Sempre forneça um targetOrigin específico, NÃO
*
, se você souber onde o documento da outra janela deve estar localizado. Não fornecer um destino específico divulga os dados que você envia para qualquer site malicioso interessado (comentário da ZalemCitizen ).Referências:
fonte
Publiquei isso como uma resposta separada, pois não está relacionado à minha resposta existente.
Esse problema surgiu recentemente para acessar um pai de um iframe que faz referência a um subdomínio e as correções existentes não funcionaram.
Dessa vez, a resposta foi modificar o documento.domínio da página pai e o iframe para ser o mesmo. Isso fará com que as mesmas verificações de política de origem pensem que coexistem exatamente no mesmo domínio (subdomínios são considerados um host diferente e falham na mesma verificação de política de origem).
Insira o seguinte
<head>
na página no iframe para corresponder ao domínio pai (ajuste para o seu tipo de documento).Observe que isso gerará um erro no desenvolvimento do host local, portanto, use uma verificação como a seguinte para evitar o erro:
fonte
example.com
iframe éabc.example.com
, em seguida, o pai ea iframe deve chamardocument.domain = "example.com"
Você pode usar
veja o seguinte.
fonte
abc()
só funcionaria sefunction abc()
fosse declarada no iframe e não na página pai.window.top.abc()
quebra o iframe no documento pai.Outra adição para quem precisa. A solução da Ash Clarke não funciona se eles estiverem usando protocolos diferentes, portanto, se você estiver usando SSL, seu iframe também está usando SSL ou isso interromperá a função. Sua solução funcionou para os domínios em si, então obrigado por isso.
fonte
A solução dada por Ash Clarke para subdomínios funciona muito bem, mas observe que você precisa incluir o documento.domínio = "meudomínio.com"; no cabeçalho da página iframe e no cabeçalho da página pai, conforme indicado no link verificações de política de mesma origem
fonte
document.domain
?localhost
ou o endereço IP da máquina (normalmente127.0.0.1
), dependendo do que estiver na barra de endereço da URL.parent.abc () funcionará apenas no mesmo domínio por motivos de segurança. Eu tentei essa solução alternativa e a minha funcionou perfeitamente.
Espero que isto ajude. :)
fonte
Com o Firefox e o Chrome, você pode usar:
Se minha função estiver presente no iframe e no pai, o pai será chamado.
fonte
Embora algumas dessas soluções possam funcionar, nenhuma delas segue as práticas recomendadas. Muitos atribuem variáveis globais e você pode fazer chamadas para várias variáveis ou funções pai, levando a um espaço para nome vulnerável e desordenado.
Para evitar isso, use um padrão de módulo. Na janela principal:
Então, no iframe:
Isso é semelhante aos padrões descritos no capítulo Herança do texto seminal de Crockford, "Javascript: The Good Parts". Você também pode aprender mais na página da w3 sobre as melhores práticas de Javascript. https://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals
fonte