Iframes HTML

Os iframes HTML são o tópico de nossa discussão. Uma página da Web pode ser exibida dentro de outra página da Web usando um iframe HTML.

As tags HTML iframe indicam um quadro embutido, portanto, também são conhecidas como quadros embutidos.

Ele insere outro documento HTML na área do retângulo do documento HTML existente.

Usando JavaScript , a página da Web e o conteúdo do iframe podem colaborar.

Sintaxe HTML Iframe

As tags HTML <iframe> estabelecem quadros embutidos.

Os documentos HTML podem ter quadros embutidos neles para mostrar outros documentos.

Sintaxe:

<!DOCTYPE html>
<html>
<body>
<iframe src=”url” title=”descrição”>
</iframe>
</body>
</html>

Índice-

Definir altura e largura do Iframe

Para especificar o tamanho do iframe, utilize os atributos de altura e largura .

Observe que os pixels ( px ) são operados por padrão para altura e largura:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<iframe src="https://mrexamples.com/html/html-iframes/" height="250" width="300" title="Iframe MrExample"></iframe>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Como alternativa, você pode adicionar um atributo de estilo e utilizar as propriedades CSS height e width :

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<iframe src="https://mrexamples.com/html/html-iframes/" style="height:250px;width:300px;" title="Iframe Example"></iframe>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Você também pode definir a largura e a altura do iframe em Porcentagem:

Example: 

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>By setting the height and width attributes, it is possible to define the iframe's size:</p>
<iframe src="https://mrexamples.com/html/html-iframes/" style="height:45%;width:65%;" title="Iframe Example"></iframe>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Quando iframes HTML são utilizados, um link pode ser inserido em um iframe.

O atributo target do link deve guiar para o atributo name do iframe:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<iframe src="https://mrexamples.com/html/html-iframes/" name="iframe_a" title="Iframe Example"></iframe><p><a href="https://mrexamples.com/html/" target="iframe_a">mrexamples.com</a></p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está outro exemplo de link para o frame de destino usando a tag HTML iframe:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<body>
<h1>MR Examples</h1>
<h2>iframe tag</h2>
<p>Please click on the linked text to see further</p>
<iframe height="220px" width="420px" src="https://mrexamples.com/html/html-iframes/" name="set_iframe">
</iframe>
<p><a href="https://mrexamples.com/html/" target="set_iframe">
MR Examples
</a>
</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Remover borda do iframe

Em iframes HTML , um iframe geralmente é coberto por uma borda.

Se você quiser remover a borda, utilize o atributo style e a propriedade border do CSS :

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<iframe src="https://mrexamples.com/html/html-iframes/" style="border:none;" title="Iframe Example"></iframe>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Além disso, você pode ajustar o tamanho, estilo e cor da borda com CSS:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<iframe src="https://mrexamples.com/html/html-iframes/" style="border:2px solid red;" title="Iframe Example"></iframe>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Marca de iframe HTML

Marcação Visão geral
<iframe> especificar um quadro embutido

Navegue em nossa referência de tags HTML para obter uma lista completa de todas as tags HTML disponíveis.=

Vantagens de usar Iframes HTML

A seguir estão as vantagens de usar Iframes HTML:

Design modular: iframes HTML facilitam uma abordagem de design modular, permitindo que você crie e integre diferentes partes de um site de forma independente.

Integração de conteúdo de terceiros: Iframes permitem que você incorpore conteúdo de terceiros, como mapas, vídeos e feeds de mídia social em seu site.

Funcionalidade aprimorada: Iframes podem ser usados ​​para adicionar funcionalidade aprimorada a um site sem redirecionar o usuário para uma página diferente.

Separação de conteúdo e design: Iframes permitem uma clara separação de conteúdo e design, facilitando a manutenção e atualização de um site ao longo do tempo.

Atualizações fáceis: Iframes permitem que você atualize seções específicas de um site sem precisar atualizar a página inteira, reduzindo o risco de erros e tornando mais rápido fazer alterações.

Maior segurança: Iframes ajudam a aumentar a segurança de um site, isolando conteúdo de terceiros potencialmente arriscado em um ambiente de sandbox separado.

Compatibilidade: Iframes são compatíveis com todos os principais navegadores da web e podem ser usados ​​com diferentes linguagens de programação, tornando-os uma ferramenta versátil para desenvolvimento web.

Sinta-se à vontade para compartilhar sua reação abaixo como uma forma de mostrar sua apreciação ou sugerir maneiras de melhorar este site.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.