Este exemplo de artigo descreve o método da página IFRAME IFRAME INCORDIDA E A PÁGINA DA PÁGINA JS COMUNICAL. Compartilhe para sua referência. A análise específica é a seguinte:
O método de comunicação entre a página e a página principal na estrutura do iframe é obviamente diferente, dependendo se o atributo SRC no iframe está vinculado ao mesmo link de domínio ou domínio cruzado. A troca de dados e o acesso mútuo do elemento DOM no mesmo domínio são muito mais simples, enquanto o domínio cruzado requer algumas maneiras inteligentes de alcançar a comunicação.
1. Comunicação entre páginas de pai e filho sob o mesmo domínio
Página pai parent.html:
Copie o código da seguinte forma: <html>
<head>
<script type = "text/javascript">
function diz () {
alert ("parent.html ------> estou no pai.html");
}
função callchild ()
{
//document.frames.000
myframe.window.say ();
myframe.window.document.getElementById ("botão"). value = "eu mudei";
}
</script>
</head>
<Body>
<Tipo de entrada = Button Value = "Callchild ()">
<iframe name = "myframe" src = "child.html"> </frame>
</body>
</html>
Subpagem Child.html:
Copie o código da seguinte forma: <html>
<head>
<script type = "text/javascript">
função diz ()
{
alerta ("Child.html ---> estou no filho.html");
}
function CallParent () {
parent.Say ();
parent.window.document.getElementsByName ("myFrame") [0] .style.Height = "100px";
}
</script>
</head>
<Body>
<input id = "button" type = button value = "chamando a função Say () em Parent.html" onclick = "CallParent ()">
</body>
</html>
Chamada de método
Conforme mostrado no exemplo acima, o método de chamar a página infantil da página pai pode ser usado por: FRAMENAME.Window.ChildMethod (); (Este método é compatível com vários navegadores)
O método da página criança chamando a página pai: parent.window.parentmethod ();
Acesso ao elemento DOM
Depois de obter o objeto da janela infantil de acordo com o Framename.window, o acesso ao elemento DOM não é diferente de acessar o elemento DOM na mesma página. Você pode copiar o código da seguinte forma: document.getElementById (), document.getElementsByName () [Index], por exemplo, copie o código da seguinte
myframe.window.document.getElementById ("Button") Windows pode ser omitido.
Coisas a serem observadas
Para garantir que a operação seja executada após o carregamento do iframe, se o iframe não for carregado, ele indubitavelmente causará um erro. Existem duas maneiras de determinar se o iframe foi carregado:
1. Use o evento ONLOAD no iframe;
2. Use Document.ReadyState == "Complete" para julgar
2. Método de comunicação de página de pai-filho entre dados cruzados
Se o iframe vincular uma página externa, o método de comunicação no mesmo nome de domínio não poderá ser usado devido ao mecanismo de segurança.
Página pai passa dados para páginas infantis
A técnica de implementação é usar o valor de hash do objeto de localização e passar dados de comunicação através dele. Precisamos adicionar apenas uma sequência #Data adicional após o SRC do iframe (os dados são os dados que você deseja passar) e, em seguida, obter os dados de uma certa maneira na página infantil. De fato, um método comum é:
1. Defina o temporizador na subpagem usando o método setInterval para ouvir as alterações no local.Href para obter as informações de dados acima
2. Em seguida, a subpagem pode executar o processamento lógico correspondente com base nessas informações de dados.
A página da criança passa dados para a página pai
A técnica de implementação é usar um proxy iframe c, que é incorporado na página infantil e deve permanecer no mesmo domínio que a página pai. Em seguida, podemos passar os dados da página infantil para ifRamec através dele, usando -os para utilizar totalmente o princípio de implementação do primeiro método de comunicação acima. A próxima pergunta é como permitir que o IFRAMEC passe os dados para a página principal A. Como o IFRAMEC e a página principal estão no mesmo domínio, fica muito mais fácil passar dados entre eles, que é um problema de comunicação com o mesmo nome de domínio. Conforme discutido anteriormente, aqui você pode usar uma janela de propriedades usadas com frequência (também pode usar o window.parent.parent), que retorna uma referência ao objeto de janela de nível superior carregado no navegador, para que possamos usar diretamente o método na página pai.
Espero que este artigo seja útil para a programação JavaScript de todos.