HTML Iframe

<iframe>

O <iframe> � um elemento HTML que serve para acrescentar conte�dos de outra p�gina web na p�gina atual.

Atrav�s deste elemento � poss�vel incluir v�deos, imagens, arquivos e in�meras outras possibilidades.

Como utilizar o <iframe>?

Vendo de forma simples, o elemento <iframe> � utilizado para inserir conte�dos externos em uma p�gina.

Desse modo, � poss�vel carregar uma p�gina externa dentro da nossa p�gina web, como vemos no exemplo da Figura 1.

Figura 1. P�gina web com um iframe mostrando o conte�do de uma p�gina externa

<iframe>: na pr�tica


  <iframe height="300"  scrolling="no" title="c�digo 1 - iframe" src="https://codepen.io/wladimirrj/embed/RwMONKK?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
    See the Pen <a href="https://codepen.io/wladimirrj/pen/RwMONKK">
    c�digo 1 - iframe</a> by Wladimir Batista Castro (<a href="https://codepen.io/wladimirrj">@wladimirrj</a>)
    on <a href="https://codepen.io">CodePen</a>.
  </iframe>

C�digo 1. C�digo mostrando na pr�tica o uso da tag <iframe>

See the Pen c�digo 1 - iframe by Wladimir Batista Castro (@wladimirrj) on CodePen.

Sintaxe do <iframe>


  <iframe src="url">...</iframe>

C�digo 2. C�digo mostrando a sintaxe do <iframe>

Atributos do elemento <iframe>

allowfullscreen

Este atributo d� a permiss�o de utilizar o <iframe> em tela cheia.

frameborder

Esse atributo � utilizado para modificar a borda padr�o do elemento <iframe>.

height

Esse atributo � utilizado para definir a altura do elemento <iframe>.

width

Esse atributo � utilizado para definir a largura do elemento <iframe>.

marginheight

Esse atributo � utilizado para alterar a dist�ncia das margens superiores e inferiores do <iframe>.

marginwidth

Esse atributo � utilizado para alterar a dist�ncia das margens laterais direita e esquerda do <iframe>.

name

Esse atributo serve para definir um nome para o elemento <iframe>.

scrolling

Esse atributo serve para habilitar ou desabilitar a barra de rolagem no elemento <iframe>. O atributo possui os seguintes valores:

yes: serve para exibir a barra de rolagem;
no: serve para esconder a barra de rolagem;
auto: a barra de rolagem � exibida conforme a necessidade do elemento.

sandbox

Esse atributo � utilizado para habilitar uma s�rie de restriç�es para oferecer segurança � p�gina.

Em alguns casos pode ser necess�rio liberar algumas dessas restriç�es. Para isso o atributo tem alguns valores que atendem essas condiç�es, veja elas:

allow-same-origin: permite que o conte�do acessado pelo iframe seja tratado como sendo da mesma origem da p�gina atual;
allow-top-navigation: permite a navegaç�o na p�gina acessada no iframe para n�vel superior;
allow-forms: permite que o <iframe> submeta formul�rios inseridos nele;
allow-popups: permite a abertura de pop-ups;
allow-scripts: permite a execuç�o de scripts;
allow-pointer-lock: permite a utilizaç�o de eventos baseados no movimento do mouse (API Pointer Lock).

src

Esse atributo � utilizado para definir o URL da p�gina que ser� incorporada.

srdoc

Esse atributo � utilizado para escrever c�digo HTML dentro do elemento <iframe>.

Importante: Optamos por mostrar os atributos mais utilizados do <iframe> neste t�pico, no entanto, outros atributos podem ser utilizados de acordo com a necessidade do desenvolvedor.

Exemplo de uso do <iframe>

Exemplo 1

No C�digo 3 demonstraremos um exemplo utilizando a tag <iframe> pra adicionar um v�deo do Youtube em uma p�gina.


  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Utilizando o elemento iframe</title>
  </head>
  <body>
      <h1>Inserindo v�deos do YouTube em uma p�gina</h1>
      <iframe width="789" height="444" src="https://www.youtube.com/embed/OoNHteiKYfs" title="COMO SAIR DE DEV JR. PRA DESENVOLVEDOR PLENO" frameborder="0" allowfullscreen></iframe>
  </body>
  </html>

C�digo 3. Exemplo de c�digo HTML

See the Pen HTML Iframe - Exemplo 1 by Wladimir Batista Castro (@wladimirrj) on CodePen.

Note que neste exemplo o iframe foi implementado no c�digo HTML para apresentar um v�deo do YouTube na p�gina criada.

Exemplo 2

No C�digo 4 demonstraremos um exemplo utilizando a tag <iframe> pra adicionar um mapa do Google Maps em uma p�gina.


  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Utilizando o elemento iframe</title>
  </head>
  <body>
      <h1>Inserindo mapas em uma p�gina</h1>
      <iframe src="https://www.google.com/maps/d/embed?mid=136ikTrYE9WDEUqX4EYLXMQw63y1VaGQ&ehbc=2E312F" width="640" height="480"></iframe>
  </body>
  </html>

C�digo 4. Exemplo de c�digo HTML

See the Pen HTML Iframe - Exemplo 2 by Wladimir Batista Castro (@wladimirrj) on CodePen.

Note que neste exemplo o iframe foi implementado no c�digo HTML para apresentar um mapa do Google Maps na p�gina criada.

Compatibilidade com navegadores

O <iframe> � compat�vel com todos os navegadores apresentados na tabela abaixo:

<iframe>	Chrome	Mozilla Firefox	Edge / IE	Opera	Safari
<iframe>	Sim	Sim	Sim	Sim	Sim