HTML Iframe

Prévia do material em texto

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.
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.
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.
	HTML Iframe
	<iframe>
	Como utilizar o <iframe>?
	Atributos do elemento <iframe>
	allowfullscreen
	frameborder
	height
	width
	marginheight
	marginwidth
	name
	scrolling
	sandbox
	src
	srdoc
	Exemplo de uso do <iframe>
	Exemplo 1
	Exemplo 2