Requisito 1: Como transferir dados da página principal A para o iframe B?
Desta forma, a página principal precisa passar os dados para o iframe B, e então o iframe B realizará um processamento específico após a obtenção dos dados.
Método de implementação
O truque da implementação é usar o valor hash do objeto location para passar dados de comunicação por meio dele. Precisamos apenas definir o src do iframe B na página principal A e adicionar uma string #data depois dele (dados são os dados que você usa). deseja passar), conforme mostra a figura abaixo Mostrar:
Então, no iframe B, você pode obter os dados aqui instantaneamente por meio de algum método. Na verdade, um método comumente usado é:
1. Defina o cronômetro por meio do método setInterval no iframe B e monitore as alterações em location.href para obter as informações de dados acima.
2. Em seguida, o iframe B pode realizar o processamento lógico correspondente com base nessas informações de dados.
Requisito 2: Como o iframe B passa dados para a página principal A?
Desta forma, o iframe B precisa passar os dados para a página principal, e então a página principal realizará um processamento específico após a obtenção dos dados.
Método de implementação
O truque para implementação é usar um proxy IframeC, que está embutido no iframe B e deve permanecer no mesmo domínio da página principal A. Então podemos usá-lo para utilizar totalmente o princípio de implementação do primeiro método de comunicação acima para transferir o dados do iframe B Para o iframeC, a próxima questão é como deixar o iframeC passar os dados para a página principal A, conforme mostrado na figura abaixo:
Como o iframeC e a página principal estão no mesmo domínio, fica muito mais simples transferir dados entre eles. Nosso método aqui é usar um atributo usado com frequência window.top (você também pode usar window.parent.parent), que retorna um. referência ao objeto de janela de nível superior carregado no navegador, para que possamos usar diretamente o método na página principal A, hahaha, simples.
Neste ponto, fazemos uma análise simples e resumida
A premissa e maior desvantagem desta implementação é que o conteúdo do iframe deve ser controlável por nós, mas pelo menos a nossa implementação é baseada nas regras de segurança do navegador e não prejudica a segurança da aplicação em si.
Alguns detalhes a serem considerados ao implementar
Tente levar em consideração a facilidade de uso, escalabilidade e capacidade de manutenção, como:
Permita que aplicativos de terceiros precisem apenas carregar um arquivo inicial JS que fornecemos para usar facilmente as várias ferramentas que fornecemos para eles.
Organizamos as diversas ferramentas acima na forma de pacotes para maximizar o carregamento sob demanda.
O arquivo inicial JS no primeiro item fornece apenas implementação de método básico e contém os kits de ferramentas mais comumente usados, como altamente adaptável
Por meio de arquivos iniciais, também fornecemos alguns kits de ferramentas JS comumente usados para aplicativos de terceiros, e os kits de ferramentas especificados podem ser usados diretamente usando um mecanismo de carregamento dinâmico semelhante ao módulo YUI3.
Classifique os dados transmitidos por aplicativos de terceiros e páginas principais (autochamada, verificação de login, dados transmitidos, etc.)
Os dados transferidos usam o formato JSON que atende a especificações específicas e são enviados por meio de um ponto de serviço unificado. A página principal fornece uma interface de serviço unificada para analisar os dados e chamar os métodos correspondentes de acordo com as especificações.
Há também a questão do controle de versão. Para minimizar o impacto em aplicativos de terceiros, as versões de todos os arquivos JS acima adotam uma estratégia de compatibilidade com versões anteriores. Cache SQUID em uma frequência específica As principais atualizações de versão são alteradas manualmente de acordo com as necessidades do usuário.
Claro, a solução acima pode não ser a solução ideal, mas espero que possa lhe dar alguma ajuda e orientação. Também estamos melhorando gradualmente alguns de nossos métodos de implementação, como o controle de versão. resolvido.
código específico
Código fonte da página principal A
Copie o código do código da seguinte forma:
Código Js
/*Página principal A*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Página principal A</title>
<script type="texto/javascript">
função inicialização(){
documento.domínio = 'bai.sohu.com';
alert('Eu sou o frame principal, incorporado com um aplicativo de terceiros IframeB, o aplicativo começará a carregar abaixo');
var iframeTag = document.getElementById('frameB'),
iframeSrc = 'http://test.com/iframePage.html';
iframeTag.src = iframeSrc;
iframeTag.style.display = 'bloquear';
};
retorno de chamada de função (h){
var iframeB = document.getElementById('frameB');
alert('IframeC chama minha interface (quadro principal) e passa a altura do IframeB para mim. O valor específico é: ' + h);
iframeB.style.height=h + 10 + 'px';
iframeB.src += '#'+ h
};
</script>
</head>
<body onload="init();">
<p>Eu sou o frame da página inicial e meu domínio é: bai.sohu.com</p>
<iframe id="frameB" style="display:none;"></iframe>
</body>
</html>
Código fonte do iframeB (iframePage.html)
Copie o código do código da seguinte forma:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iframeB</title>
</head>
<body onload="init();">
<p style="height:500px;">Sou um aplicativo de terceiros e meu domínio é: test.com</p>
<iframe id="frameC" style="height:1px;width:1px;display:none;"></iframe>
</body>
</html>
<script type="texto/javascript">
função inicialização(){
alert('Sou um aplicativo de terceiros. Vamos criar um canal de comunicação IframeC no mesmo domínio do frame principal, definir seu src e usar o sinal # para passar o valor da altura');
var iframeTag = document.getElementById('frameC'),
iframeSrc = 'http://bai.sohu.com/iframePageC.html#',
pageHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
iframeTag.src = iframeSrc + pageHeight;
iframeTag.style.display = 'bloquear';
janela.setTimeout(função(){
alert('A página principal define o src do meu (IframeB) e me passa a altura que ele recebe através do Hash (#): ' + location.hash);
},2000);
};
</script>
Código fonte do iframeC (iframePageC.html)
Copie o código do código da seguinte forma:
<script type="texto/javascript">
documento.domínio = 'bai.sohu.com';
alert('Eu (IframeC) recebi o iframeB me passando o valor da altura através do parâmetro (#), agora chamo o método da página principal para definir a altura do IframeB');
top.callback(window.location.href.split('#')[1]);
</script>