Tag HTML <iframe>
Neste post, falaremos sobre exemplos de Tag iframe . Aspirando para atender às demandas de aprendizagem.
A tag HTML <iframe> é usada para incorporar outro documento HTML no documento atual. O conteúdo da tag <iframe> é normalmente um arquivo HTML separado, embora também possa ser um arquivo PDF, um arquivo de imagem ou qualquer outro tipo de documento que possa ser exibido em um navegador da web.
A marcação para um quadro embutido é a seguinte:
Example:
1
2
3
4
5
6
7
8
<!DOCTYPE html>
src="https://mrexamples.com" title="mrexamples Free
Online Web Tutorials"
Configurando e removendo bordas de iframe usando CSS:
Example:
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
src="https://mrexamples.com" width="50%" height="250" style="border:2px dotted blue"
src="https://mrexamples.com" width="50%" height="250" style="border:none;"
Aqui está um exemplo de <iframe> para incorporar vídeo do youtube:
Example:
1
2
3
4
5
6
7
<!DOCTYPE html>
width="560" height="315" src="https://www.youtube.com/embed/60ItHLz5WEA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
Índice-
Uso de iframe de tags
O Tag iframe <iframe> refere-se a um frame inline.
Os quadros embutidos permitem que outro documento seja incorporado ao documento HTML atual.
Conselho: é recomendável garantir que você adicione um atributo de título para o <iframe> . Ao usar isso, os leitores de tela podem ler o conteúdo do <iframe>.
Principais recursos e usos
Aqui estão alguns dos principais recursos e usos da tag <iframe> :
- A tag <iframe> é comumente usada para incorporar conteúdo externo de outro site, como um vídeo do YouTube, um mapa do Google ou uma postagem de mídia social. Isso permite que os desenvolvedores da Web exibam conteúdo de outras fontes em seu próprio site.
- A tag <iframe> pode ser usada para criar um quadro embutido em uma página da web. Isso pode ser útil para exibir o conteúdo que precisa ser rolado ou que precisa ser exibido separadamente do conteúdo ao redor.
- A tag <iframe> permite que os desenvolvedores da Web especifiquem as dimensões e a localização do conteúdo incorporado. Isso pode ser útil para controlar a área de exibição do conteúdo incorporado e para integrá-lo perfeitamente com o conteúdo circundante.
- O uso da tag <iframe> pode apresentar riscos de segurança, como o potencial para ataques de script entre sites (XSS). Como tal, é importante limpar adequadamente qualquer conteúdo gerado pelo usuário que esteja incorporado em uma tag <iframe> e garantir que o conteúdo incorporado seja confiável e seguro.
- A tag <iframe> é suportada por todos os principais navegadores da web e é amplamente usada no desenvolvimento da web para incorporar conteúdo externo em páginas da web.
Atributos
| Atributo | Valor | Visão geral |
|---|---|---|
| altura | píxeis | A altura de um iframe é definida aqui. 150 pixels é a altura padrão. |
| carregando | ansioso preguiçoso |
Indica se um <iframe> deve ser carregado imediatamente ou se deve ser adiado até que certas condições sejam atendidas. |
| permitir | Uma política de recurso é definida para o <iframe> | |
| Permitir tela cheia | verdadeiro falso |
É definido como verdadeiro se o <iframe> for capaz de ativar o modo de tela cheia com o método requestFullscreen() . |
| permitir pedido de pagamento | verdadeiro falso |
Habilite iframes de origem cruzada para acessar a API de solicitação de pagamento definindo-a como verdadeira |
| srcdoc | Código HTML | Exibe o conteúdo HTML de uma página dentro de um <iframe>. |
| nome | texto | Forneça o nome de um <iframe> |
| política de referência | sem referência sem referência quando rebaixar origem origem quando origem cruzada mesma origem origem estrita quando origem cruzada url inseguro |
Essa propriedade determina quais dados do referenciador devem ser enviados ao buscar o iframe. |
| origem | URL | Indique o endereço do documento a incorporar no <iframe>. |
| largura | píxeis | A largura <iframe> é especificada aqui. Uma largura de 300 pixels é o padrão. |
| caixa de areia | permitir-formulários permitir-bloqueio de ponteiro permitir-pop-ups permitir-mesma-origem permitir-scripts permitir navegação superior |
Permite que restrições extras sejam aplicadas ao conteúdo em um <iframe> |
Compatibilidade do navegador
| Elemento |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| <iframe> | Sim | Sim | Sim | Sim | Sim |
<!–
Anúncio
–><!–
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]
–>
Atributos
Global
O T ag iframe <iframe> em HTML permite e aceita Atributos Globais .
Evento
O Tag iframe <iframe> aceita Atributos de Evento em HTML.
CSS predefinido
É comum que os navegadores renderizem o elemento <iframe> com os valores padrão da seguinte forma:
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}
Vantagens da tag HTML <iframe>
A tag HTML <iframe> fornece várias vantagens para desenvolvedores da web. Aqui estão algumas das principais vantagens:
- A tag <iframe> permite que os desenvolvedores da Web incorporem conteúdo externo em uma página da Web, como vídeos, mapas ou postagens de mídia social. Isso facilita a integração de conteúdo de outras fontes em um site, sem a necessidade de criar o conteúdo do zero.
- A tag <iframe> fornece um alto grau de controle sobre como o conteúdo incorporado é exibido na página da web. Os desenvolvedores podem definir o tamanho e a posição do conteúdo e podem usar CSS para estilizar o conteúdo para corresponder ao resto da página.
- Como o conteúdo é hospedado externamente, as atualizações do conteúdo incorporado podem ser feitas independentemente da própria página da web. Por exemplo, se um vídeo incorporado em uma página for atualizado, as alterações serão refletidas automaticamente no conteúdo incorporado, sem nenhuma alteração necessária no código da página da web.
- Como o conteúdo incorporado é hospedado externamente, ele pode ser carregado de forma assíncrona, o que pode melhorar o tempo de carregamento da página e o desempenho geral do site.
- A tag <iframe> pode ser usada para facilitar a comunicação entre domínios diferentes entre diferentes páginas da Web, o que pode ser útil para aplicativos da Web que requerem comunicação entre diferentes componentes.
Se este artigo em algum lugar atendeu aos seus desejos educacionais, compartilhe essas informações valiosas com seus amigos também clicando nos links abaixo.
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
