A tag iframe pode criar um quadro incorporado na página da web, que chama o conteúdo de outro documento da página da web especificando o atributo SRC. Como o FrameSet, ele é usado para dividir a estrutura da página da web para manter algumas partes do público da página da web, mas em comparação com a estrutura da estrutura do FrameSet dividindo toda a página da web, os iframes são mais flexíveis e podem ser incorporados em qualquer lugar da página da web. Devido a esse recurso do uso do iFrame, ele foi amplamente utilizado em algumas páginas da web, o que também levou a alguns abusos inadequados. Web Design analisará várias maneiras comuns de usar o elemento da Web IFRAME.
- Fazendo um componente da página de resposta sem atualização como uma solução para troca assíncrona de dados. Este é um método alternativo para enviar solicitações de forma assíncrona sem usar o Ajax nos primeiros dias. Ao definir um elemento iframe invisível na página e apontar seu atributo SRC para o endereço da página em que a solicitação precisa ser enviada, a solicitação pode ser enviada. No mesmo domínio, a página retornada pode ser analisada para obter dados. Outra vantagem é que ela ignora o modelo de segurança da Sandbox do AJAX e pode enviar com sucesso solicitações de domínio cruzado para obter dados, mas, neste caso, o objeto de documento do iframe não pode ser recuperado. Devido à sua característica, ainda é aplicável em algumas páginas da Web que exigem solicitações de domínio cruzado. Esse tipo de atualização significa que a página pai não atualiza durante o processo de troca de dados e continua a responder às operações do usuário. A troca de dados real é bloqueada pela página iframe incorporada na página pai. Esta página do iFrame incorporada pode ser definida para ser visível ou invisível conforme necessário e não afetará a resposta de outros elementos na página pai ao usuário. Esse efeito é semelhante ao Ajax sem atualização, mas pode-se ver que seu mecanismo é completamente diferente. Embora o Gmail seja um modelo para aplicativos AJAX, ele combina muitos iframes para obter seu desempenho superior e experiência do usuário.
- Uma maneira de otimizar uma página. Use iframes para carregar scripts em paralelo para resolver os problemas de carregamento de conteúdo de terceiros de carregamento lento, como ícones e anúncios. A plataforma de publicidade do Google Adsense significa usar o IFRAME para compartilhar receita nos sites dos usuários. Você também pode ver esse tipo de tecnologia visualizando e analisando os códigos de publicidade na página inicial do portal doméstico. Você também pode usar um iframe oculto para pré -carregar arquivos maiores para armazenar em cache quando a rede estiver sob baixa pressão da rede, para que outras páginas possam usá -lo. O conceito de pré -carga pode ser analisado usando o Firebug para o Google Homepage. Você pode ver na tag corporal:
onLload = document.fqfocus (); if (document.images) new image (). src = '/images/nav_logo4.png'
Com esse código, a imagem carregada Nav_Logo4.png não é usada na página inicial, mas ao usar essa imagem em outras páginas, como a lista de resultados de pesquisa, você só precisa lê -lo no cache e não precisa baixá -lo novamente.
- Como um método de hack para a camada flutuante no navegador IE6 para bloquear controles de seleção e elementos flash. Na era do Web2.0, a tecnologia LightBox (ou Thickbox) tornou -se um efeito popular com sua boa experiência e nova experiência visual. Na verdade, essa tecnologia usa uma camada flutuante absolutamente posicionada para cobrir a página original para apresentar informações de texto, imagens, formulários ou qualquer outro elementos de página arbitrários, substituindo o caminho no desenvolvimento da Web iniciais que as mensagens e os controles de entrada do navegador pop-up são frequentemente usados para interagir com os usuários. De maneira antiga, os scripts que exibem novas janelas são frequentemente interceptados pelo sistema de bloqueio de anúncios do navegador, e os controles de mensagem do navegador são criticados pelos pesquisadores da experiência do usuário porque interrompem o processo do navegador, resultando em toda a página e em outras páginas da web navegando por várias tags bloqueadas. Como desenvolvedor de front-end da Web da linha de frente com requisitos rígidos em si mesmo, você definitivamente encontrará esse problema no processo de implementação do efeito da caixa de luz. A camada de posicionamento absoluta não pode cobrir os controles de seleção e o flash na página da web no IE6 e, mesmo que o estilo seja definido como um valor mais alto do Index Z, será inútil. Isso ocorre porque o elemento selecionado é um elemento de nível de formulário no IE6 e sua prioridade é muito maior do que todas as outras tags HTML. Somente os Iframes do mesmo nível de formulário podem cobri-lo. Portanto, os desenvolvedores descobriram que colocar a camada flutuante em um iframe ou colocar um iframe na camada flutuante pode resolver esse problema. Felizmente, esse problema foi corrigido na versão de atualização do IE após o IE6, mas para o IE6, que ainda possui 50%+ participação de mercado (estatísticas no momento da publicação), essa solução ainda é de significado prático.
Além dos três aplicativos acima, alguns aplicativos inadequados também são comuns para elementos do IFRAME. Por exemplo, incorpore muitos quadros iframe na página e atualize o iframe quando clicado especificando o atributo de destino da tag de link fora do quadro. Esse uso é semelhante ao FrameSet, alcançando o objetivo de compartilhar a navegação. A intenção original é boa, mas não há dúvida sobre as desvantagens. Isso levará a muitos pedidos de uma página. O artigo "Melhores práticas para acelerar o seu site" mencionado acima afirma claramente que a otimização de páginas exige minimizar o número de iframes e resume três desvantagens:
- Mesmo que o conteúdo esteja vazio, causará perda de recursos (incluindo cliente e servidor);
- Blocks Page Onload Event Triggers (Blocks Page Onload e é traduzido, pois impedirá o carregamento da página, há dúvida aqui)
- Sem semântica (o SEO é uma parte importante do marketing do site)
Na próxima versão do HTML5 do XHTML1.0, não há suporte para a tag de quadros devido ao impacto negativo na disponibilidade da página da web, o que também explica alguns problemas do lado.
Além disso, como o IFRAME incorporado não pode se adaptar automaticamente ao tamanho do conteúdo interno, para manter a integridade da exibição da página, também é necessário escrever um script JavaScript para ajustar instantaneamente seu tamanho de acordo com as alterações no conteúdo do iFrame. As múltiplas solicitações dispersas, juntamente com a necessidade de scripts JavaScript para corrigir, aumenta o risco de vários sistemas de execução de páginas do iFrame. Então, existe alguma boa maneira de manter um conteúdo de página em público? O lado do servidor há muito nos forneceu soluções. A inclusão no ASP e os métodos requisitos no PHP são todos usados para incluir uma peça de código existente no programa. Isso também pode permitir que uma certa parte da página (como menus de navegação, rodapés) seja pública. No entanto, após a execução, é produzido como uma página completa, reduzindo efetivamente as solicitações do cliente e não há problema de alta adaptabilidade dos IFRames.
