Iframe e Frame – o que são e qual a melhor forma de usar frames em HTML. Especifique o caminho no atributo Src do elemento Frame

Olá, queridos leitores do blog. Hoje falaremos sobre frames em HTML. É claro que começaremos do início, nomeadamente com que tipo de animal é este. Falaremos também sobre o presente (Frame) e o futuro (Iframe) desses elementos na versão atual da linguagem de marcação de hipertexto e no novo padrão HTML 5 com .

No final do artigo, depois descrição detalhada o processo de criação de frames embutidos e sua estrutura clássica em código HTML (já raramente utilizado), abordaremos a questão da relevância de construir um site sobre eles, e também discutiremos maneiras possíveis sua aplicação no período atual usando o exemplo do meu blog.

O que é isso? Acontece que eles podem ser usados ​​​​não apenas em sites, mas também em quaisquer aplicativos de programas, mas diferem porque a janela de uma página web ou aplicativo será dividida em várias áreas, em cada uma das quais um documento separado é carregado . Além disso, estas áreas de enquadramento comportam-se de forma independente umas das outras.

Provavelmente o exemplo mais óbvio de seu uso, que quase todos vocês já encontraram, são os chamados arquivos de ajuda que muitos programas instalados em seu computador possuem.

O arquivo com o menu de ajuda é carregado na janela esquerda e o documento correspondente ao item de menu selecionado é exibido na janela direita. Vale ressaltar que esta estrutura permite evitar o recarregamento do arquivo com o menu na janela esquerda ao abrir um novo documento na janela direita. Essa é justamente a principal vantagem do uso de frames em HTML.

Na verdade, o próprio nome desses elementos deve ser interpretado como uma janela independente. Com a ajuda de frames, temos a oportunidade de dividir uma grande janela em vários fragmentos, que por sua vez podem servir como receptores para documentos separados e independentes uns dos outros (páginas, textos, imagens, vídeos, etc.).

Como uma estrutura de quadro é criada em linguagem de marcação de hipertexto? Se falamos do padrão Html 4.01 (de acordo com a classificação), que é o principal da atualidade, então para isso são utilizados três elementos - Frame, Frameset e Noframes.

Se falarmos do padrão Html 5 (nosso futuro, alguns dos quais já são suportados por muitos navegadores), então não haverá mais tags Frame, Frameset e Noframes, assim como a estrutura clássica de frames, haverá; uma única tag Iframe (embedded frame), da qual falaremos no início, e depois voltaremos nossa atenção para o esquema clássico da versão 4.01, que atualmente está em uso.

Iframe, ao contrário dos clássicos discutidos abaixo, não requer a substituição da tag Body por tags Frameset. Aqueles. esta tag pode ser inserida em páginas normais, por exemplo, dentro de um parágrafo ou em qualquer outro lugar. Em sua essência, esse elemento é muito semelhante à tag Img que já consideramos.

É um elemento embutido com conteúdo substituído porque se comporta exatamente como um elemento embutido, mas exibe conteúdo estranho dentro dele. conteúdo externo. Existem apenas quatro desses elementos na linguagem HTML - Img, Iframe, Object e Embed. Portanto, nosso herói implica a presença de um arquivo externo que será carregado em uma área cujo tamanho é definido através dos atributos desta tag.

Que. Um Iframe é um elemento coletor no qual um objeto externo (como um vídeo) é carregado. E para indicar o caminho para este arquivo, que deve ser carregado na página, utilize o atributo especial Src. Mas, diferentemente do Img, o elemento Iframe está emparelhado, ou seja, Há também uma tag de fechamento:

Este exemplo mostra a saída em uma página de vídeo do Youtube usando um Iframe. Para limitar a área da moldura (janela) onde será carregado arquivo externo, existem atributos Width e Height, cujos valores são especificados em pixels:

Aqueles. esta tag cria uma área na qual algum objeto externo é carregado (não importa se é do seu site ou de outro recurso). A largura e a altura da área são especificadas usando Largura e Altura, e o atributo Src especifica o caminho para este objeto.

O elemento Iframe herdou todos esses atributos de tags inline semelhantes com conteúdo substituído (como o Img já mencionado acima). Bem, ele também tirou os atributos Hspace e Vspace das imagens, que permitem definir recuos das bordas do quadro até o texto que o envolve.

Também é significativo que o alinhamento do quadro embutido seja feito exatamente da mesma forma que pudemos ver ao estudar imagens em HTML - . O mesmo Align , mas para a tag Iframe com valores possíveis de Bottom, Top, Middle, Left e Right.

Mas esse elemento também pegou vários atributos da tag Frame da estrutura clássica do frame, sobre os quais falaremos detalhadamente a seguir no texto. Esses atributos incluem o Nome, cujo valor pode ser utilizado como valor para que o documento que você precisa ao clicar em um link seja aberto na janela deste quadro (leia mais abaixo).

Também no Iframe, o atributo Frameborder migrou da tag Frame, que possui apenas dois valores - 0 (o quadro ao redor do quadro não é exibido) ou 1 (o quadro fica visível). O valor padrão é Frameborder=1, então para removê-lo você precisará inserir Frameborder="0":

O atributo Scrolling também foi transferido de Frame para este elemento, que tem um valor padrão de Auto - as barras de rolagem no quadro aparecerão conforme necessário quando o conteúdo for maior que o tamanho da janela pretendida para exibi-lo.

Bem, os atributos Marginwidth e Marginheight também foram movidos do elemento Frame. Eles serão discutidos em detalhes a seguir no texto, mas em poucas palavras - eles permitem definir o recuo em largura e altura das bordas do quadro até o conteúdo colocado nele.

Como já mencionei, um exemplo claro de uso de um Iframe é:

Ao inserir um Iframe diretamente em uma página da web, você receberá a saída de um vídeo do YouTube. Concluímos que este elemento é um cruzamento entre elementos inline com conteúdo substituído e, na verdade, frames clássicos, que discutiremos agora.

Assim, a criação de uma estrutura de frame clássica começa com o fato de você escrever no código HTML em vez das tags Body de abertura e fechamento, que normalmente devem estar presentes em qualquer documento, substituindo-o por um container baseado em elementos do Frameset.

O ponto fundamental é que o elemento Body não pode ser usado neste caso - seja Body (para um documento normal) ou Frameset (ao criar uma estrutura de quadro de documento):

Cada quadro que criamos dentro do principal é criado usando um elemento Frame separado. Esta tag é única e nela definimos o caminho para o documento que será carregado nesta janela.

O terceiro elemento que ainda não abordamos são os Noframes. Está emparelhado e permite escrever algum texto dentro, que será processado pelo navegador e exibido no página da Internet somente se esse mesmo navegador (ou outro dispositivo de exibição) não suportar frames. Isso pode acontecer, por exemplo, se você estiver utilizando um navegador para dispositivos móveis.

Normalmente, os Noframes adicionam não apenas informações sobre a situação atual com a impossibilidade de processar a estrutura do frame, mas também adicionam a possibilidade de ir para outras páginas, onde você pode continuar trabalhando sem utilizá-las. É difícil dizer mais alguma coisa sobre ele, então vamos continuar.

Acontece que o elemento Frameset, usado no lugar da tag Body, ocupa todo o espaço alocado para a área de visualização, e os frames serão criados dentro desta área usando elementos individuais Quadro. A este respeito, surge a questão - como dividir a área de visualização entre janelas separadas ou, por outras palavras, como definir o tamanho de cada uma delas.

Isso é feito adicionando os atributos apropriados ao elemento Frameset. Existem dois deles - colunas e linhas. Cols define a divisão de uma janela grande em quadros ou colunas verticais, e Linhas permite dividi-la em janelas ou linhas horizontais.

Os valores para Cols e Rows da tag Html Frameset são números separados por vírgulas (sem espaços). Esses números definem as proporções das janelas que queremos obter como resultado. Portanto, não importa quantos números separados por vírgula sejam escritos em colunas ou linhas, o número de quadros que tivermos será o resultado.

Por exemplo, usando esta notação obteremos três colunas verticais cuja largura corresponderá às proporções 2:5:3.

Como definimos as proporções para três frames, teremos que incluir três elementos Frame entre as tags de abertura e fechamento do Frameset, pelo menos sem especificar atributos adicionais:

Como resultado, nossa estrutura de quadro, composta por três janelas vazias, ficará assim:

Neste exemplo, definimos os tamanhos das janelas (Frame) através de porcentagens, que são obtidas da largura da área de visualização (este é o caso quando se utiliza Cols) ou da sua altura (Linhas). Ao alterar a viewport, a relação percentual entre os tamanhos dos quadros será mantida. Mas em vez de porcentagens, você também pode usar simplesmente números que significarão. Aqui, creio, também não devem surgir dificuldades de compreensão.

Mas também existe uma opção bastante incomum nas designações de tamanho, que se parece com um asterisco “*”. Além disso, pode ser apenas “*” ou um asterisco com um número na frente, por exemplo, “3*”. Uma coisa inteligente que é muito parecida com as porcentagens e significa que dividimos o espaço do Frame proporcionalmente.

Vejamos um exemplo. Agora vamos escolher dividir a viewport em linhas horizontais usando Linhas:

O que esta entrada significa? Toda a área de visualização disponível verticalmente será dividida em três linhas. A altura da primeira será de 200 pixels, da segunda - de 500, mas a terceira linha ocupará todo o espaço restante em altura, porque “*” foi usado como tamanho.

O que é digno de nota é que os valores “*” e “1*” significam a mesma coisa - dividimos todo o espaço restante em um e damos esta parte a este quadro (bem, isto é, todo o espaço restante).

Mas veja o que acontece se você usar o valor “*” com um número para dividir proporcionalmente:

Quais você acha que serão as dimensões da moldura neste caso? É claro que a segunda linha terá definitivamente uma altura de 100 pixels. Mas como o espaço restante será dividido em altura entre a terceira e a primeira fila?

É muito fácil de calcular - basta adicionar quatro (4*) a dois (2*) e dividir por este denominador (lembre-se das frações do currículo escolar) dois e quatro. Aqueles. obtemos que a primeira coluna com moldura ocupará um terço do espaço restante em altura e a terceira coluna ocupará dois terços. Ou, em outras palavras, o terceiro será duas vezes maior que o primeiro:

Você pode usar todas as três maneiras de dimensionar janelas de quadro em um atributo, por exemplo:

Como resultado, obteremos a primeira coluna Frame com largura de dez por cento de toda a área disponível, a segunda - 100 pixels, e as três restantes terão largura nas proporções de quatro, três e dois nonos do espaço de largura restante. Então tudo é simples e claro.

Se você deseja dividir a janela principal não apenas em quadros horizontais e verticais, mas, por exemplo, em suas combinações, você pode usar a estrutura aninhada de elementos do conjunto de quadros separadamente para colunas e separadamente para linhas. Por exemplo, para obter a estrutura mostrada na imagem abaixo, basta utilizar a seguinte construção:

Aqueles. primeiro dividimos com "frameset cols="20%,80%"" tudo espaço disponível em duas colunas verticalmente e definimos o conteúdo da coluna da direita com a tag “frame”, mas em vez de adicionar um elemento “frame” para a coluna da esquerda, abrimos um novo “frameset rows = “10%,*”".

E com a ajuda dele dividimos a coluna da direita em duas linhas com frames, cujo conteúdo é definido usando duas tags “frame”, após as quais fechamos os dois contêineres “frameset”. Tudo é simples e lógico.

Mas todos nós falamos sobre o elemento Frameset e seus atributos Cols e Rows, com os quais formamos a estrutura e definimos seus tamanhos. Agora vamos descobrir como exibir os documentos necessários nos quadros necessários e como configurar a interação entre suas janelas.

Então, como gerenciamos a aparência? janelas criadas? Tudo isso está contido nos atributos da tag Frame. O primeiro que vale a pena mencionar é o Src. Já o conhecemos em etiqueta imagem quando analisamos a inserção de imagens no código HTML. Sua essência não mudou e ainda permite especificar o caminho para o documento que deve ser carregado no quadro.

O caminho para o documento em Src pode ser especificado como . Caminhos relativos geralmente são usados ​​para um documento localizado em seu próprio recurso, mas você precisará de caminhos absolutos quando quiser carregar um documento de outro site em uma janela de quadro.

Se o atributo Src não for especificado indicando o caminho para o documento necessário, um documento em branco será carregado na janela. Pessoalmente, uma vez fiz algo semelhante para o meu blog (como um elemento de navegação adicional) e ao mesmo tempo criei uma pasta separada para ele no servidor de hospedagem e coloquei lá não apenas um arquivo HTML com uma estrutura de quadro (que chamei de índice .html), mas também todos carregados em diversas janelas de documentos, bem como arquivos de imagem que foram usados ​​como plano de fundo.

Portanto, foi mais fácil para mim usar links relativos no atributo Src da tag Frame:

O que é digno de nota é que se você substituir todos os links fornecidos neste código de relativo para absoluto (como https://site/navigator/joomla.html) e abrir este arquivo em um navegador, os documentos especificados em Frame serão carregados do meu servidor e você verá uma imagem semelhante em seu navegador. Além disso, não importa onde estará localizado o seu arquivo com a estrutura do frame (index.html) - no seu computador ou na hospedagem.

No exemplo mostrado na figura, uma página com um determinado menu, que é um menu normal, é carregada na janela do quadro esquerdo. Mas o que importa não é como o menu é formado, mas sim o que acontece ao clicar em algum de seus links.

Se você fizer isso, tudo acontecerá exatamente como deveria - o documento será aberto na janela inferior direita. Mas para isso tive que usar um pequeno truque, pois na versão padrão o documento abria em todo o tamanho da janela, substituindo a estrutura do frame, que eu não precisava de jeito nenhum, pois o menu de navegação nos frames esquerdo e superior desaparecido.

Então, quando falamos sobre hiperlinks, mencionamos o atributo da tag “A” como Target=_blank. Você se lembra para que serve? É correto abrir o documento vinculado em uma nova janela. Por padrão, deve abrir na mesma janela, o que equivale a target="_self".

Mas as capacidades da Target não param por aí. Acontece que você pode adicionar um valor a ele na forma de um nome de quadro, que é previamente especificado no atributo especial Name da tag Frame. Então o documento através deste link não abrirá na mesma janela, ocupando todo o seu espaço, mas sim no Quadro que você especificou. Está claro? Se não inteiramente, ficará claro agora, quando analisarmos o exemplo.

Então, vamos voltar ao nosso exemplo mostrado na figura acima. Precisamos abrir páginas usando links da janela esquerda no quadro inferior direito (grande). Portanto, primeiro você precisa dar um nome a essa janela grande usando o atributo Name na tag Frame.

Eles fizeram isso e chamaram de “ktona”. Agora você pode abrir com segurança o arquivo carregado como um menu na janela esquerda e adicionar o atributo Target="ktona" a todas as tags A nele:

A história do Joomla e do componente VirtueMart

Claro, usando a ferramenta de busca e substituição, não será difícil anotá-lo para todos os hiperlinks, mas por que carregar o código desnecessariamente quando temos uma grande oportunidade de usar a tag Base especial, que já mencionamos no mesmo artigo sobre hiperlinks, quando falaram sobre o uso do Target em branco.

Basta colocar o elemento base target="ktona" entre as tags Head de abertura e fechamento e todos os links no código HTML deste documento abrirão novas páginas no quadro especificado chamado "ktona":

A propósito, se considerarmos minha ferramenta que já existia como exemplo, ainda precisamos ter certeza de que todos os links da janela horizontal superior abrem suas páginas no quadro vertical esquerdo, que serve como meu menu esquerdo. O que precisa ser feito para isso?

Bem, primeiro, você precisa dar um nome ao quadro vertical esquerdo:

E no arquivo que é carregado na janela superior (gor.html), você precisa adicionar o elemento base target="gor":

É isso, agora fizemos tudo certo. Todos os documentos seguindo os links do quadro superior serão abertos na janela esquerda, e todos os links dele abrirão documentos no quadro central e maior. Na minha opinião, tudo é simples e lógico.

Vamos agora ver quais atributos além de Src e Name podem ser usados ​​na tag Frame para personalizar a aparência dos frames. Vamos começar com rolagem. Com ele, podemos configurar a exibição das barras de rolagem para cada janela da sua estrutura de frames separadamente.

A rolagem tem um valor padrão Auto - o navegador decidirá automaticamente, com base no tamanho do documento carregado no quadro, se exibirá uma barra de rolagem ou não. Caso o documento não caiba totalmente na janela, aparecerá uma barra de rolagem, permitindo visualizar tudo até o final.

Você também pode usar os valores Sim (as barras de rolagem na janela sempre serão exibidas, mesmo que o documento caiba completamente nela) e Não (as barras de rolagem nunca aparecerão, mesmo que parte do documento não caiba) como valores para rolagem.

Na minha ferramenta que já existia, usei o valor padrão Auto e as barras de rolagem nos quadros apareceram conforme necessário:

O próximo atributo da tag Frame, Noresize, é um atributo único (não possui valores). Ao registrá-lo, você proibirá a alteração de seu tamanho, o que por padrão é feito simplesmente arrastando a borda dos quadros com o mouse.

Ao mover o cursor do mouse até a borda, você verá que o cursor se transformará em uma seta de duas pontas e agora, clicando em botão esquerdo mouse, você pode mover a borda como desejar. Noresize proíbe essa obstinação (ao mover o cursor do mouse até a borda das janelas, você não verá mais a seta bidirecional).

Outro atributo visual é o Frameborder. Usando-o, você pode especificar se deseja desenhar uma moldura (borda) entre as molduras ou não. Frameborder pode ter apenas dois valores possíveis - 0 (não desenhe um quadro) ou 1 (mostre uma borda). O valor padrão, claro, é 1.

Existe uma sutileza. Se quiser remover a borda visível, você terá que adicionar Frameborder=0 a todas as tags de quadro dos quadros entre os quais deseja remover as bordas visíveis.

Bem, ainda temos que considerar alguns atributos da tag Frame - Marginwidth e Marginheight, que definem as margens em largura (direita e esquerda) e altura (superior e inferior) das bordas da janela até o conteúdo carregado nela (o número significa o número de pixels da margem):

Vejamos qual é a desvantagem fundamental das estruturas clássicas, que essencialmente põe fim à sua utilização na criação de um site. Consiste no fato de que é impossível rastrear seu estado usando esta estrutura de frames.

Estruturas complexas podem ter milhares de estados diferentes (variantes de documentos abertos em janelas de quadros diferentes), mas o endereço URL dessa mesma estrutura não muda. Por causa disso, será impossível usar os favoritos do navegador ou enviar links de páginas que você gosta para outros usuários. Por que?

Porque o endereço permanece inalterado mesmo ao abri-lo nos favoritos do navegador ou em um e-mail e-mail, você obterá uma página com o estado inicial da estrutura do quadro, e não o estado que gostaria de salvar.

Embora, é claro, esse problema possa ser resolvido, mas não com ferramentas HTML, mas com a ajuda de linguagens de programação de servidor (por exemplo, PHP) ou cliente (JavaScript), e essas soluções não serão cem por cento eficientes. Essas soluções, de fato, permitem adicionar dados adicionais sobre seu estado atual ao endereço URL da estrutura do quadro, mas isso não é fácil de fazer e a confiabilidade não será absoluta.

Esta é a primeira desvantagem de usar frames para criar sites e é muito significativa, mas há outra grande desvantagem. Os motores de busca, é claro, aprenderam há muito tempo a indexá-los e extrair deles os endereços dos documentos que são carregados em suas janelas. O problema é diferente.

Quando um usuário passa dos resultados de pesquisa do Yandex ou do Google para o seu site construído com base em uma estrutura de frames, apenas o documento que foi carregado em um dos frames será aberto, e não toda a estrutura. Você entende do que estou falando?

O usuário verá o documento e não verá a navegação em seu site, pois ele estará protegido em outras janelas, e elas serão carregadas apenas como parte de toda a estrutura.

Como resultado, um site construído em frames simplesmente se torna inutilizável. Embora, novamente, existam soluções para este problema baseadas em scripts de servidor, quando um redirecionamento será realizado dos endereços de documentos individuais para uma estrutura de quadro localizada em nas condições certas, mas novamente isso é muito difícil e nem sempre confiável.

Em geral, a conclusão pode ser tirada de forma inequívoca - não há necessidade de criar sites em frames. Mas eles são constantemente usados ​​para criar ajuda para vários aplicativos e podem ser úteis em outras pequenas coisas.

Por exemplo, criei uma estrutura de frames, que chamei de “Navigator” (agora foi temporariamente removida) e que se tornou uma espécie de menu externo expandido do meu blog, o que, me parece, deve simplificar o trabalho com o recurso e, portanto, melhorar o “sem bobagem” têm uma influência muito, muito forte na promoção do site.

Mas, no entanto, para evitar quaisquer problemas com motores de busca, fechei toda essa estrutura de quadro e também adicionei, por precaução, a tudo isso Arquivos HTML Meta tag Rodots com proibição de indexação:

JOOMLA

Mas todas essas restrições se aplicam apenas a estruturas nas tags Frame e Frameset, e os frames integrados nas tags Iframe não apresentam desvantagens visíveis, e podem e até devem ser usados ​​​​em seus projetos, pelo menos para inserir vídeos de YouTube.

Boa sorte para você! Nos vemos em breve nas páginas do blog

Você pode estar interessado

Diretivas de comentários e Doctype em código HTML, bem como o conceito de bloco e elementos inline (tags)
Incorporar e objeto - tags HTML para exibir conteúdo de mídia (vídeo, flash, áudio) em páginas da web
Img - Tag HTML para inserir uma imagem (Src), alinhar e envolver o texto em torno dela (align), bem como definir um plano de fundo (background)
O que é linguagem de marcação de hipertexto HTML e como visualizar uma lista de todas as tags no validador W3C Select, Option, Textarea, Label, Fieldset, Legend - tags Formulários HTML listas suspensas e campo de texto
Listas em código HTML - tags UL, OL, LI e DL
Fonte (Face, Tamanho e Cor), Blockquote e Pré tags - formatação de texto legado em HTML puro (sem usando CSS)
Como as cores são definidas no código HTML e CSS, seleção de tons RGB em tabelas, saída Yandex e outros programas

No início da construção de sites, os recursos da web usavam amplamente frames para exibir partes individuais das páginas. Mas com a chegada da nova versão do HTML 5 tudo mudou. Elementos de marcação e estão obsoletos. Eles foram substituídos por uma única tag - . Como adicionar ao html? O exemplo abaixo ficará claro até para um iniciante em programação.

O quadro é a base da maioria das primeiras páginas da web. Se traduzida literalmente, esta palavra significa “frame”, ou seja, um frame é uma pequena parte de uma página em um navegador. O uso generalizado de frames no passado pode ser explicado pela baixa qualidade e alto custo do tráfego da Internet. Via de regra, o site era dividido em 3 a 5 partes, cada uma com uma finalidade específica:

• “cabeçalho” (quadro superior ao longo da largura da página) - exibe o nome do recurso;
• “vidro” esquerdo/direito - exibição do menu;
• O quadro central é uma exibição do conteúdo do site.

A divisão da página em partes possibilitou sobrecarregar apenas uma determinada parte na atualização. Por exemplo, o usuário clicou em um item de menu e o novo conteúdo foi baixado no quadro central.

Por que é necessário em HTML? Um exemplo é a inserção de conteúdo de um recurso de terceiros. A situação clássica é quando um desenvolvedor web deseja mostrar a localização de um objeto em um mapa. O que devo fazer? Desenhar uma planta do local do zero? Não - existe uma solução mais simples: incorpore um elemento Google Map, Yandex Maps ou 2GIS na página. O problema é resolvido em quatro etapas.

Além disso, você pode selecionar o tamanho do mapa e configurar outras opções de exibição.

De que outra forma você pode usá-lo em HTML?? Um exemplo é a inserção de materiais de vídeo do recurso Youtube. As tecnologias multimídia atraem usuários da Internet, razão pela qual o conteúdo de vídeo é tão popular. O desenvolvedor cuidará da instalação do vídeo rapidamente.

Ambos os exemplos usaram geração automática de código, mas os desenvolvedores profissionais devem ser capazes de escrever código por conta própria. Em primeiro lugar, isto permitirá compreender o layout da página e, se necessário, modificá-lo. Em segundo lugar, a marcação dos elementos do site (mesmo pertencendo a um recurso externo) nem sempre é formada sem a participação do webmaster. É aqui que entram em jogo as altas qualificações do desenvolvedor.

Portanto, antes de começar a fazer o layout da página, você precisa considerar a tag iframe (html): o que é e como usá-la corretamente.

Em primeiro lugar, deve-se observar que a tag está emparelhada. Entre os elementos de abertura e fechamento, você especifica o conteúdo que será exibido em navegadores que não suportam este elemento de marcação. Principais atributos da tag:

• largura(largura);
• altura(altura);
• src (endereço do recurso baixado);
• alinhar(método de alinhamento);
• borda do quadro;
• permitir tela cheia.

Assim, o código para . O exemplo HTML é demonstrado na íntegra abaixo:

Na marcação acima, basta substituir o endereço do site por qualquer outro e, se necessário, ajustar o tamanho do frame.

A verificação de vírus em um site geralmente não detecta inserções de iframe, que podem incluir links para sites duvidosos, mas nova versão O plugin AntiVirus WP irá indicá-los.

As inserções de iframe em si não são códigos maliciosos, portanto, muitas vezes não são detectadas pelos serviços online que verificam a presença de vírus em um site. Usando inserções de iframe, geralmente são carregados arquivos que podem estar localizados em um recurso externo. Por exemplo, este método pode ser usado para enviar um vídeo do You Tube para o seu site. Mas muitas vezes, inserções de iframe são usadas por invasores para enviar arquivos de conteúdo suspeito para o site da vítima.

Já escrevi que encontrei repetidamente sites obviamente infectados, mas verificá-los no recurso antivírus-alarm.ru usando bancos de dados dos principais desenvolvedores de antivírus não revelou nada suspeito. Uma verificação em 2ip.ru indicou a presença de inserções de iframe suspeitas, mas sem indicar um local específico no código onde elas poderiam ser encontradas. Também não indicou se essas inserções eram benéficas ou maliciosas.

Mas com o lançamento versão mais recente Com o plugin WP, a situação mudou. Segundo o desenvolvedor, este plugin agora mostra inserções de iframe. E você mesmo poderá determinar se eles são prejudiciais ou não. Sabendo como é uma inserção de iframe:

Se o plugin o detectar, com base no endereço do recurso indicado neste encarte, é fácil determinar se é útil ou prejudicial.

Ao contrário dos antivírus para computadores, que encontram e removem códigos maliciosos, a maioria dos antivírus para sites, como o AntiVirus, encontra apenas códigos suspeitos do ponto de vista deles. A decisão de removê-lo e a própria remoção são tomadas pelo usuário. Além disso, para iniciantes que não estão familiarizados com PHP, apenas o plugin TAC, desenvolvido para testar o tema, vai realmente ajudar. Conheço apenas um plugin que não apenas encontra, mas também remove códigos incorretos. Infelizmente, este plugin possui um recurso desagradável. Se não conseguir lidar com a infecção no site, ele bloqueará o acesso ao site sem pedir permissão.

Portanto, você não deve instalar plug-ins antivírus se nada de suspeito acontecer ao seu site. Para realizar uma verificação preventiva de vírus em um site, é mais sensato usar os serviços online mencionados acima. Somente depois que algo suspeito for identificado nesses serviços você poderá recorrer a plug-ins que podem ajudar a especificar a localização código malicioso. Novamente, nem todos têm as qualificações para isso. Será mais fácil para os iniciantes buscarem ajuda da equipe técnica. suporte de hospedagem.

A maior parte dos sites é infectada depois que o computador do proprietário é infectado. Como resultado, o login e a senha do administrador são roubados. painéis ou de hospedagem. E apenas uma pequena parte é infectada como resultado de hackers. Portanto, a medida mais importante para proteger o site é manter a segurança do seu PC. Não esqueça que o computador também deve ter um bom arquivo .

Fizemos um análogo Ferramenta Google Marcador para webmasters. Deixe-me lembrá-lo de que o Marker é uma ferramenta da conta do Google Webmaster que permite anotar suas páginas do Open Graph com tags. Para fazer isso, basta selecionar um trecho de texto da página com o mouse e indicar que este é o título e esta é a classificação. Sua página é então carregada em um Iframe na conta do webmaster.

Agora, o Google, tendo encontrado uma página semelhante em seu site, já sabe que tipo de conteúdo é publicado nela e como analisá-lo lindamente em sua essência (artigo, produto, vídeo...)

Precisávamos de funcionalidade semelhante. A tarefa parecia simples e exclusivamente do lado do cliente. No entanto, na prática, a solução está na intersecção do lado do cliente e do servidor (programadores JS “puros” podem não saber nada sobre vários servidores proxy e levar muito tempo para abordar o projeto). Porém, não encontrei um artigo na Internet que descrevesse toda a tecnologia do início ao fim. Gostaria também de agradecer ao usuário BeLove e aos nossos seguranças pela ajuda.

No nosso caso, queríamos que o webmaster pudesse obter de forma conveniente (clicando com o mouse) o valor xPath para determinados elementos de sua página.

No entanto:

Especificamente, o valor permitir a mesma origem (ou melhor, sua ausência) apenas diz que o iframe deve sempre ser considerado carregado de um domínio estrangeiro (por exemplo, você não pode enviar uma solicitação AJAX para o domínio do documento pai de tal um quadro)

Vamos prestar atenção ao atributo src do elemento iframe: src="https://wmthighlighter.googleusercontent.com/webmasters/data-highlighter/RenderFrame/007..." - nossa página é carregada no painel de administração de o domínio do Google. Além disso, é ainda mais grave: até mesmo scripts e imagens no documento de origem são executados através de um proxy. Todos os src, href... são substituídos em html por proxy. Algo assim:

Todos os recursos que sua página usa também são armazenados nos servidores proxy do Google. Aqui está o nosso, por exemplo.

Certifique-se de determinar a codificação da página (via resposta http ou charset em html) - nosso proxy deve responder na mesma codificação da página que carregamos. Também definiremos o Content-Type por precaução, embora esteja claro que estamos obtendo a página em text/html e a devolveremos da mesma forma.
string final url = request.getParameter("url");
final HttpGet requestApache = new HttpGet(url);

Chegamos, quebramos nossa própria solução contornando as restrições entre domínios. Agora não podemos acessar o conteúdo do iframe novamente.

Continuando buscando uma solução do Google, abri nossa página veiculada por proxy em uma janela separada

E notei um erro estranho no console.
CrossPageChannel: Não é possível conectar, objeto de janela de mesmo nível não definido.
Ficou claro que organizar tudo era mais complicado do que simplesmente carregar uma página do seu domínio em um iframe. As páginas se comunicam entre si. Assim, avançamos para window.postMessage

Aqui está um exemplo de proxy página inicial Habr com script incorporado:
http://highlighter.indexisto.com/?md5=6ec7rdHxUfRkrFy55jrJQA==&url=http%3A%2F%2Fhabrahabr.ru&expires=1390468360

Colocamos o nginx na frente do proxy, ele escuta a porta 80 e removemos o próprio proxy para outra porta. Fechamos todas as outras portas, exceto 80 de mundo exterior.

Agora vamos fazer o proxy funcionar apenas através do painel de administração. No momento em que o webmaster insere a URL do seu site, corremos rapidamente para o servidor onde geramos um hash md5 a partir do TimeStamp atual + 1 hora, da própria URL e do supersecreto quando:
String final md5Me = timeStampExpires + urlEncoded + "SUPERSECRET";
final MessageDigest md = MessageDigest.getInstance("MD5");
md.reset();
atualização(md5Me.getBytes("UTF-8"));

Código de string = Base64.encodeBase64String(md.digest());
código = código.replaceAll("/", "_");

código = código.replaceAll("\\+","-");

Observe também que no código obtemos a string md5 não como o hexadecimal usual, mas na codificação base64, e no md5 resultante fazemos estranhas substituições da barra e dos caracteres de adição por sublinhados e travessões.

E Java fornece base64 canônico.

Tendo recebido uma resposta de um servidor com md5 seguro em nosso painel de administração, tentamos carregar o seguinte URL no iframe:

highlighter.indexisto.com/?md5=Dr4u2Yeb3NrBQLgyDAFrHg==&url=http%3A%2F%2Fhabrahabr.ru&expires=1389791582

Agora configuramos o módulo nginx HttpSecureLinkModule. Este módulo verifica o md5 de todos os parâmetros que chegam até ele (a mesma chave secreta é registrada no módulo e no servlet admin), verifica se o link foi analisado e somente neste caso encaminha a solicitação para nosso servlet proxy .

Agora ninguém pode usar nosso proxy fora do painel de administração e também não pode inserir uma imagem solicitada ao nosso servidor em qualquer lugar - ela morrerá em uma hora de qualquer maneira.

Isso é tudo, pessoal! O Google naturalmente foi muito mais longe com sua ferramenta de marcador. Para identificar claramente um elemento em uma página, você precisa marcar o mesmo elemento (por exemplo, o título de um artigo) em várias páginas do mesmo tipo. que você pode construir o xpath com mais precisão e descartar ids diferentes como “post-2334”, que obviamente só funcionará em uma página em nosso painel de administração, por enquanto, o xpath precisa ser corrigido manualmente para obter um resultado aceitável.

Elemento

Nos velhos tempos do web design, havia muitos elementos que arruinavam a vida de todo desenvolvedor. Quase sempre eram uma abordagem de design ruim. Felizmente, o elemento foi descontinuado no HTML5. Mas ou "quadro embutido" ainda está disponível. Será obsoleto na próxima versão? Talvez devêssemos evitá-lo? Existem vários usos válidos deste elemento ao criar uma página HTML. Mas é preciso entender o que é e como funciona para evitar erros.

Ambos os elementos permitem criar um documento HTML separado. Um link para o conteúdo do documento referenciado pela página web atual é especificado no atributo src.

. . . . . .

A principal diferença entre e é que ele impõe a regra de que o documento HTML tem precedência. O conteúdo é exibido dentro de um elemento que faz parte do documento atual. Por exemplo, considere este vídeo incorporado retirado do YouTube:

O vídeo está claramente na página HTML e não em um painel separado. O elemento quebrou esse paradigma e permitiu que o documento exercesse controle sobre a janela do navegador, dividindo-a em vários pequenos painéis (frames), cada um dos quais exibindo um documento separado. Todas as outras diferenças entre e decorrem desta diferença básica.

Algum dia você poderá se deparar com a tarefa de atualizar um site antigo que foi construído com frames. Você também pode querer usar um layout de largura fixa para recriar o mesmo pesadelo de painéis e soleiras independentes. Mas você não poderá usar o atributo target para abrir um link em um quadro separado. Você pode começar a procurar soluções JavaScript. Por favor, não faça isso.

Existem vários casos de uso válidos para Criação de HTML páginas:

• incorporação de conteúdo de mídia de terceiros;
• incorporar seu próprio conteúdo de mídia por meio de um documento multiplataforma;
• incorporação de exemplos de código;
• incorporação de “applets” de terceiros como formas de pagamento.

Aqui estão alguns casos de uso terríveis:

• Galeria de fotos;
• fórum ou bate-papo.

Se você precisar incorporar documentos HTML pré-existentes e independentes no atual, use . Se você estiver criando tudo do zero, não há razão para dividir o design da página em vários documentos separados. Especialmente se não forem conteúdos independentes.

Esta publicação é uma tradução do artigo “”, elaborado pela simpática equipe do projeto