Efeito "Picture-in-picture" - discutindo o uso de tags IFRAME
Autor：Eve Cole
Data da Última Atualização：2009-06-11 17:24:01
Olhando para o site atual, a velocidade da Internet é um pouco lenta, mas quase todas as páginas têm muitas coisas semelhantes, como banners, imagens de colunas, direitos autorais, etc. , não há nada de errado com isso. Mas, afinal, as carteiras dos usuários estão cada vez mais sem dinheiro por essas coisas "embelezadas". Existe alguma maneira de fazer com que essas coisas semelhantes não precisem mais ser baixadas após um download, mas apenas baixadas. o conteúdo da web em áreas onde o conteúdo mudou?
A resposta é definitivamente: aplique a tag Iframe!
1. O uso de tags Iframe <BR> Quando se trata de Iframe, você pode tê-lo jogado no “canto esquecido”, mas quando se trata de seu irmão Frame, você não será estranho. Tag de quadro é uma tag de quadro. O que chamamos de estrutura multiquadro é para exibir vários arquivos HTML em uma janela do navegador. Agora, nos deparamos com uma situação muito realista: se houver um tutorial, ele será dividido em seções, uma por uma. No final de cada página, há links para a “seção anterior” e a “seção seguinte”, exceto o conteúdo da. cada tutorial é diferente. Além disso, o conteúdo de outras partes da página é o mesmo. Parece muito chato fazer páginas estúpidas página por página. Nesse momento, pensei de repente, se existe uma maneira de manter outras partes. a página inalterada, basta fazer o tutorial Torna-se uma página de conteúdo página por página, sem outro conteúdo. Ao clicar no link para cima e para baixo da página, apenas a parte do conteúdo do tutorial será alterada e as demais partes permanecerão inalteradas. desta forma, uma economiza tempo, e a outra é que o tutorial terá três mudanças longas e duas curtas no futuro, também é muito conveniente e não afetará todo o exército, mais importante ainda, os banners publicitários, listas de colunas, a navegação e outras coisas incluídas em quase todas as páginas são baixadas apenas uma vez e não são mais baixadas.
Tag iframe, também chamada de tag de quadro flutuante, você pode usá-la para incorporar um documento HTML em uma exibição HTML. A maior diferença da tag Frame é que o arquivo HTML referenciado por esta tag não é exibido independentemente de outros arquivos HTML, mas pode ser incorporado diretamente em um arquivo HTML e integrado ao conteúdo do arquivo HTML para se tornar um todo Além disso, você também pode exibir o mesmo conteúdo várias vezes em uma página sem precisar escrever o conteúdo repetidamente. Uma metáfora vívida é a TV "picture-in-picture".
Agora vamos falar sobre o uso de tags Iframe.
O formato de uso da tag Iframe é:
<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
src: O caminho do arquivo, que pode ser um arquivo HTML, texto, ASP, etc.;
largura, altura: a largura e a altura da área "picture-in-picture";
rolagem: Quando o arquivo HTML especificado do SRC não é exibido na área especificada, a opção de rolagem, se definida como NÃO, a barra de rolagem não aparecerá se for Auto: a barra de rolagem aparecerá automaticamente se for Sim; ele será exibido;
FrameBorder: A largura da borda da área para mesclar a "imagem na imagem" com o conteúdo adjacente, geralmente é definida como 0.
por exemplo:
<Iframe src="http://netschool.cpcw.com/homepage" width="250" height="200" scrolling="no" frameborder="0"></iframe>
2. Controle mútuo entre o formulário pai e o quadro flutuante <BR> Na linguagem de script e na hierarquia de objetos, a janela que contém o Iframe é chamada de formulário pai, enquanto o quadro flutuante é chamado de formulário filho. Deixe claro que esses dois Este relacionamento. é importante porque para acessar um formulário filho em um formulário pai ou vice-versa, você deve conhecer a hierarquia de objetos antes de poder acessar e controlar o formulário programaticamente.
1. Acessar e controlar os objetos do subformulário no formulário pai <BR> No formulário pai, o Iframe, ou seja, o subformulário, é um objeto filho do objeto documento Você pode acessar diretamente os objetos do subformulário em. o roteiro.
Agora fica uma dúvida, ou seja, como controlamos esse Iframe. Aqui precisamos falar sobre o objeto Iframe. Ao definirmos o atributo ID para esta tag, podemos realizar uma série de controles no HTML contido no Iframe através do Document Object Model DOM.
Por exemplo, incorpore o arquivo test.htm em example.htm e controle alguns objetos de tag em test.htm:
<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>
O código do arquivo test.htm é:
<html>
<corpo>
<h1 id="myH1">olá, meu garoto</h1>
</body>
</html>
Se quisermos alterar o texto da tag H1 com número de identificação myH1 para olá, meu caro, podemos usar:
document.myH1.innerText="olá,meu querido"(documento pode ser omitido)
No arquivo example.htm, o subformulário apontado pelo objeto de marca Iframe é consistente com o modelo geral de objeto DHTML e o método de controle de acesso ao objeto é o mesmo, portanto não entrarei em detalhes.
2. Acessar e controlar objetos do formulário pai no subformulário <BR> No subformulário podemos acessar os objetos da janela pai através do seu objeto pai (pai).
Como exemplo.htm:
<html>
<body onclick="alert(tt.myH1.innerHTML)">
<Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>
<h1 id="myH2">olá, minha esposa</h1>
</body>
</html>
Se quisermos acessar o texto do título em frame1.htm com o número de identificação myH2 e alterá-lo para "olá, meu amigo", podemos escrever assim: parent.myH2.innerText = "olá, meu amigo"
Aqui o objeto pai representa o formulário atual (o formulário onde está localizado example.htm). Para acessar os objetos do formulário pai no formulário filho, sem exceção, é feito através do objeto pai.
Embora o Iframe esteja incorporado em outro arquivo HTML, ele permanece relativamente independente e é um "reino independente". As características de um único HTML também se aplicam a quadros flutuantes.
Imagine, por meio da tag Iframe, podemos expressar o conteúdo inalterado como um Iframe. Dessa forma, não precisamos escrever o mesmo conteúdo repetidamente. Isso é um pouco como um processo ou função de programação, e é muito tedioso. o trabalho manual é salvo! Além disso, e o mais importante, torna as modificações de página mais viáveis, porque em vez de ter que modificar cada página para ajustar o layout, você só precisa modificar o layout de um formulário pai.
Uma coisa a notar é que o navegador Nestscape não suporta a tag Iframe, mas no mundo atual do IE, isso não parece ser um grande problema, as tags Iframe são amplamente utilizadas, não apenas por si mesmas (o site). mas também para que os internautas economizem nas taxas da Internet. Por que não?
