Referências entre frameworks
Todos os quadros em uma página são fornecidos como atributos do objeto janela na forma de uma coleção. Por exemplo: window.frames representa a coleção de todos os quadros na página. Isso é semelhante a objetos de formulário, objetos de link, objetos de imagem, etc. ., mas a diferença é que essas coleções são propriedades do documento. Portanto, para fazer referência a um subquadro, você pode usar a seguinte sintaxe:
Copie o código do código da seguinte forma:
window.frames["nomeNome"];
janela.frames.frameName
janela.frames[índice]
Entre eles, a palavra window também pode ser substituída ou omitida por self. Supondo que frameName seja o primeiro quadro da página, os seguintes métodos de escrita são equivalentes:
Copie o código do código da seguinte forma:
self.frames["nomeNome"]
self.frames[0]
quadros[0]
frameName
Cada quadro corresponde a uma página HTML, portanto este quadro também é uma janela independente do navegador. Possui todas as propriedades de uma janela. A chamada referência ao quadro é uma referência ao objeto janela. Com este objeto de janela, você pode operar facilmente as páginas nele contidas, como usar o objeto window.document para gravar dados na página, usar a propriedade window.location para alterar a página no quadro, etc.
O seguinte apresenta as referências mútuas entre diferentes níveis de estruturas:
1. Referência do quadro pai para o quadro filho
Conhecendo os princípios acima, é muito fácil referenciar o quadro filho a partir do quadro pai, ou seja:
Copie o código do código da seguinte forma:
window.frames["nomeNome"];
Isso faz referência ao subquadro denominado frameName na página. Se você deseja referenciar um subquadro dentro de um subquadro, de acordo com a natureza do quadro referenciado, que na verdade é o objeto janela, você pode implementá-lo assim:
Copie o código do código da seguinte forma:
window.frames["frameName"].frames["frameName2"];
Desta forma, o subquadro de segundo nível é referenciado e, por analogia, a referência de quadros multicamadas pode ser alcançada.
2． Referência do quadro filho para o quadro pai
Cada objeto de janela possui uma propriedade pai que representa seu quadro pai. Se o quadro já for um quadro de nível superior, window.parent também representará o próprio quadro.
3. Referências entre quadros irmãos
Se dois quadros forem subquadros do mesmo quadro, eles serão chamados de quadros irmãos e poderão fazer referência um ao outro por meio do quadro pai. Por exemplo, uma página inclui dois subquadros:
Copie o código do código da seguinte forma:
<frameset rows="50%,50%">
<frame src="1.html" name="frame1" />
<frame src="2.html" name="frame2" />
</frameset>
No frame1, você pode usar a seguinte instrução para fazer referência ao frame2:
Copie o código do código da seguinte forma:
self.parent.frames["frame2"];
4. Referências mútuas entre diferentes níveis de estruturas
O nível da estrutura é para a estrutura de nível superior. Quando os níveis são diferentes, desde que você saiba o nível onde está e o nível e nome do outro quadro, você pode acessar facilmente um ao outro usando as propriedades do objeto janela referenciado pelo quadro, por exemplo:
Copie o código do código da seguinte forma:
self.parent.frames["childName"].frames["targetFrameName"];
5. Referência ao quadro de nível superior
Semelhante à propriedade parent, o objeto window também possui uma propriedade top. Representa uma referência ao quadro de nível superior, que pode ser usada para determinar se um quadro em si é um quadro de nível superior, por exemplo:
Copie o código do código da seguinte forma:
//Determina se este quadro é um quadro de nível superior
if(self==topo){
//fazer alguma coisa
}
Alterar a página de carregamento do framework
A referência ao quadro é uma referência ao objeto janela. Usando o atributo location do objeto janela, você pode alterar a navegação do quadro, por exemplo:
window.frames[0].location="1.html";
Isso redireciona a página do primeiro quadro da página para 1.html. Aproveitando essa propriedade, você pode até usar um link para atualizar vários quadros.
Copie o código do código da seguinte forma:
<frameset rows="50%,50%">
<frame src="1.html" name="frame1" />
<frame src="2.html" name="frame2" />
</frameset>
<!--algum código-->
<a href="frame1.location='3.html;frame2.location='4.html'" onclick="">link</a>
<!--algum código-->
Faça referência a variáveis e funções JavaScript em outras estruturas
Antes de apresentar técnicas para referenciar variáveis e funções JavaScript em outros frameworks, vejamos o seguinte código:
Copie o código do código da seguinte forma:
<linguagem script="JavaScript" type="text/javascript">
<!--
função olá(){
alerta("olá, ajax!");
}
janela.olá();
//-->
</script>
Se você executar este código, uma janela “olá, ajax!” aparecerá, que é o resultado da execução da função hello(). Então, por que hello() se tornou um método do objeto window? Porque todas as variáveis globais e funções globais definidas em uma página são membros do objeto window. Por exemplo:
Copie o código do código da seguinte forma:
var a=1;
alerta(janela.a);
Uma caixa de diálogo aparecerá mostrando 1. O mesmo princípio se aplica ao compartilhamento de variáveis e funções entre diferentes frameworks, chamando-as através do objeto window.
Por exemplo: uma página de navegação de produto consiste em dois subquadros. O lado esquerdo representa o link para a categoria do produto, quando o usuário clica no link da categoria, a lista de produtos correspondente é exibida no lado direito; Compra] ao lado do produto para adicionar o carrinho de compras do produto.
Neste exemplo, a página de navegação esquerda pode ser utilizada para armazenar os produtos que o usuário deseja adquirir, pois quando o usuário clica no link de navegação, o que muda é outra página, ou seja, a página de exibição do produto, e a própria página de navegação permanece inalterado, portanto, as variáveis JavaScript não serão perdidas e poderão ser usadas para armazenar dados globais. Seu princípio de implementação é o seguinte:
Suponha que a página à esquerda seja link.html e a página à direita seja show.html. A estrutura da página é a seguinte:
Copie o código do código da seguinte forma:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<cabeça>
<title> Novo documento </title>
</head>
<frameset cols="20%,80%">
<frame src="link.html" name="link" />
<frame src="show.html" name="show" />
</frameset>
</html>
Você pode adicionar uma declaração como esta ao lado dos produtos exibidos em show.html:
<a href="void(0)" onclick="self.parent.link.addToOrders(32068)">Adicionar ao carrinho</a>
Entre eles, link representa a estrutura de navegação. O array arrOrders é definido na página link.html para armazenar o id do produto. A função addToOrders() é usada para responder ao evento de clique do link [Compra] próximo ao link. product. O parâmetro id que ele recebe representa o id do produto. O exemplo é um produto com ID 32068:
Copie o código do código da seguinte forma:
<linguagem script="JavaScript" type="text/javascript">
<!--
var arrOrders=new Array();
função addToOrders(id){
arrOrders.push(id);
}
//-->
</script>
Desta forma, você pode usar arrOrders na página de checkout ou na página de navegação do carrinho de compras para deixar todos os produtos prontos para serem adquiridos.
O framework pode dividir uma página em vários módulos com funções independentes. Cada módulo é independente um do outro, mas pode ser conectado através da referência do objeto window.