HTML: guia sobre iFrame

Neste artigo, você aprenderá como usar um iframe para exibir uma página da Web em outra página da Web.

O que é iFrame?

iframes ou iframes são usados ​​para exibir objetos externos, incluindo outras páginas da web dentro de uma página da web. Um iframe realmente funciona como um mini navegador da web dentro de um navegador da web. Além disso, o conteúdo dentro de um iframe existe de forma completamente independente dos elementos circundantes.

A sintaxe básica para adicionar um iframe a uma página da Web pode ser fornecida por:

<iframe src =" URL "> </iframe>

A URL especificada no atributo src aponta para a localização de um objeto externo ou página da web.

O exemplo a seguir exibe o arquivo “hello.html” em um iframe do documento atual.

<iframe src="hello.html"></iframe>

Defina a largura e a altura do iFrame

As propriedades height e width são usadas para especificar a altura e a largura do iframe.

<iframe src="hello.html" width="400" height="200"></iframe>

Você também pode definir a largura e a altura do iframe usando CSS assim:

<iframe src="hello.html" style="width: 400px; height: 200px;"></iframe>

Nota: Os valores das propriedades de largura e altura são especificados em pixels por padrão, mas você também pode definir esses valores como porcentagens, como 50%, 100%, etc. A largura padrão de um iframe é 300 pixels e a altura padrão é 150 pixels.

ATENÇÃO: Aprenda HTML, CSS e Javascript neste curso gratuito de programação!

Remova as bordas do quadro padrão

Por padrão, há uma borda ao redor do iframe. No entanto, se você deseja modificar ou remover a borda do iframe, a melhor maneira é usar a propriedade border CSS.

O exemplo a seguir irá simplesmente renderizar um iframe sem bordas.

<iframe src="hello.html" style="border: none;"></iframe>

Da mesma forma, você pode adicionar uma borda de sua escolha a um iframe usando a propriedade border. O exemplo a seguir renderizará um iframe com 2 pixels de borda azul.

<iframe src="hello.html" style="border: 2px solid blue;"></iframe>

Use o iFrame como destino do link

iframes também podem ser usados ​​como alvos de hiperlink.

Você pode usar namea para nomear o iframe. Isso significa que quando um link com um atributo de destino com esse nome como valor é clicado, o recurso vinculado será aberto nesse iframe.

Vamos tentar um exemplo para entender como funciona basicamente:

<iframe src="minhapagina.html" name="MeuFrame"></iframe>
<p><a href="https://programadoresdepre.com.br" target="myFrame">Abrir ProgramadoresDepre.com.br</a></p>

Leia também: CSS: guia sobre backgrounds