<\/a><\/p>\n Um iframe \u00e9 um elemento do HTML utilizado para incorporar outra p\u00e1gina<\/a> da web na p\u00e1gina atual. Ou seja, com ele voc\u00ea pode incluir conte\u00fados de outras p\u00e1ginas na sua pr\u00f3pria p\u00e1gina.<\/p>\n O iframe \u00e9 um elemento HTML<\/a> muito poderoso. Atrav\u00e9s da tag <iframe><\/strong>, \u00e9 poss\u00edvel incluir v\u00eddeos, imagens e conte\u00fados de outras p\u00e1ginas<\/a>. Tamb\u00e9m \u00e9 muito utilizado para incorporar elementos de publicidade na p\u00e1gina<\/a>. Ele pode integrar o conte\u00fado em qualquer parte do seu layout, sem interferir na estrutura do seu site. Dessa forma, podemos estiliz\u00e1-lo diretamente atrav\u00e9s do CSS. Sendo assim, ele possui o comportamento de um elemento HTML tradicional e pode ser modificado a fim de se adequar ao layout da sua p\u00e1gina.<\/p>\n Portanto, imagine o iframe como parte do conte\u00fado, por\u00e9m lembre-se que n\u00e3o faz parte da sua p\u00e1gina. Quando encontramos v\u00eddeos do YouTube<\/a> incorporados dentro de uma p\u00e1gina, esses elementos foram integrados utilizando o iframe HTML. Da mesma forma, os mapas do Google<\/a> geralmente tamb\u00e9m s\u00e3o inclu\u00eddos atrav\u00e9s de um iframe HTML. Para poder incorporar um iframe ao seu c\u00f3digo HTML<\/a>, basta utilizar a tag <iframe><\/strong>. Vejamos o exemplo abaixo, exemplificando a tag iframe:<\/p>\n Desta forma teremos o resultado conforme a imagem abaixo:<\/p>\n Apesar da maioria dos navegadores atuais suportarem esse elemento sem problemas, algumas vers\u00f5es mais antigas ainda podem encontrar dificuldades. Para incluir uma mensagem caso o navegador n\u00e3o tenha suporte, basta acrescentar um conte\u00fado dentro das tags <iframe><\/strong>. Assim, caso o navegador n\u00e3o suporte o iframe, ser\u00e1 mostrada a mensagem. Por outro lado, se o navegador renderizar corretamente o iframe, a mensagem n\u00e3o ser\u00e1 mostrada. Podemos incluir apenas uma mensagem, ou ainda incluir um c\u00f3digo HTML<\/a>. Vejamos ent\u00e3o os exemplos abaixo:<\/p>\n <\/a><\/p>\n O iframe HTML suporta bem qualquer atributo global<\/a>, assim como atributos de evento<\/a>. Por\u00e9m, existem alguns atributos que s\u00e3o mais utilizados, vamos explicar abaixo os principais deles:<\/p>\n Conforme o exemplo anterior, podemos notar o uso do atributo src<\/strong>. Esse atributo \u00e9 utilizado para indicar qual p\u00e1gina ser\u00e1 renderizada no iframe. No nosso exemplo, a p\u00e1gina renderizada ser\u00e1 a p\u00e1gina inicial da HomeHost<\/a>.<\/p>\n Voc\u00ea tamb\u00e9m pode utilizar a URL de uma p\u00e1gina pertencente ao seu dom\u00ednio<\/a> ou servidor<\/a>, ou seja, uma URL local. Por exemplo: digamos que eu queira incluir o conte\u00fado de uma p\u00e1gina “sobre.html” do meu site, na p\u00e1gina inicial, de forma que ambas se encontram na mesma pasta do servidor. Posso simplesmente utilizar o c\u00f3digo do exemplo abaixo:<\/p>\n Para poder modificar as dimens\u00f5es do nosso iframe, podemos utilizar o CSS. Por\u00e9m tamb\u00e9m temos atributos para definir essas medidas. S\u00e3o eles: width<\/strong> (para largura) e height<\/strong> (para altura). Vejamos o exemplo abaixo onde vamos definir uma largura de 300px e uma altura de 200px para nosso iframe HTML:<\/p>\n Dessa forma, o resultado ser\u00e1 um iframe HTML como na imagem abaixo:<\/p>\n Como dissemos anteriormente, podemos estilizar o iframe atrav\u00e9s do CSS. Portanto, o mesmo resultado poderia ser obtido com o exemplo abaixo:<\/p>\n Alguns quadros de iframes permitem a utiliza\u00e7\u00e3o de tela cheia, como por exemplo, iframes de v\u00eddeos do YouTube<\/a>. Podemos utilizar a propriedade allowfullscreen<\/strong> para permitir que o usu\u00e1rio utilize a op\u00e7\u00e3o de abrir o quadro em tela cheia. Veja o c\u00f3digo de exemplo abaixo:<\/p>\n O atributo name<\/strong> define um nome para o quadro de iframe. Esse recurso \u00e9 muito \u00fatil para utilizar o iframe HTML interagindo com links HTML. Portanto, vejamos ent\u00e3o o exemplo abaixo atribuindo um nome para o nosso iframe:<\/p>\n Al\u00e9m dos atributos globais, de evento e os atributos acima, o iframe suporta outros atributos. Ademais, caso utilize um iframe de algum elemento diferente, como um v\u00eddeo, \u00e9 poss\u00edvel utilizar atributos pr\u00f3prios para esses recursos. Por exemplo, ao incluir um iframe de um v\u00eddeo do YouTube, podemos setar atributos que permitem utilizar alguns recursos de v\u00eddeo, atrav\u00e9s do allow<\/strong>, como no exemplo abaixo:<\/p>\n Voc\u00ea tamb\u00e9m pode ver outros atributos do Iframe HTML atrav\u00e9s da documenta\u00e7\u00e3o apresentada na W3CSchool sobre esta tag<\/a>. Al\u00e9m de um iframe com conte\u00fado fixo j\u00e1 definido, podemos ainda utilizar os recursos dos links HTML<\/a> para torn\u00e1-lo interativo. Para isso vamos inicialmente atribuir um nome ao iframe, atrav\u00e9s do atributo name<\/strong>:<\/p>\n Posteriormente podemos tamb\u00e9m j\u00e1 definir uma URL ao atributo src<\/strong>, que ser\u00e1 a p\u00e1gina renderizada inicialmente. Vejamos ent\u00e3o o exemplo abaixo:<\/p>\n Agora, vamos incluir as tags de intera\u00e7\u00e3o atrav\u00e9s dos links HTML<\/a>, ou seja, da tag <a><\/strong>. Para isso, vamos colocar uma url<\/strong> no atributo href<\/strong>, e vamos atribuir um target<\/strong> ao link. Para que o link seja renderizado no iframe, o target<\/strong> deve ser exatamente o mesmo que o nome atribu\u00eddo ao iframe. Portanto, vejamos o exemplo abaixo:<\/p>\n No exemplo acima, criamos tr\u00eas links, onde ao clicar em qualquer um deles, o iframe renderizar\u00e1 a p\u00e1gina selecionada. Voc\u00ea pode tamb\u00e9m conferir o exemplo disponibilizado pelo W3C Schools na plataforma de testes<\/a>. Existem algumas maneiras de incluir um v\u00eddeo do YouTube diretamente em suas p\u00e1ginas HTML<\/a>. A mais f\u00e1cil \u00e9 a utiliza\u00e7\u00e3o de iframes. Por isso, vamos explicar passo a passo como voc\u00ea pode conseguir o c\u00f3digo de incorpora\u00e7\u00e3o diretamente no YouTube.<\/p>\n Inicialmente, abra a p\u00e1gina inicial do YouTube.<\/a> Posteriormente, escolha o v\u00eddeo que deseja inserir em sua p\u00e1gina, no caso, utilizaremos como exemplo o v\u00eddeo “O que \u00e9 WordPress<\/a>” do canal da HomeHost<\/a>. Assim que encontrar o v\u00eddeo que deseja, clique com o bot\u00e3o direito do mouse no v\u00eddeo, e aparecer\u00e1 uma lista op\u00e7\u00f5es conforme a imagem abaixo:<\/p>\n Na caixa de op\u00e7\u00f5es, selecione “Copiar c\u00f3digo de incorpora\u00e7\u00e3o<\/strong>“:<\/p>\n Pronto, agora o c\u00f3digo j\u00e1 estar\u00e1 copiado, basta abrir o seu editor de texto e colar o c\u00f3digo. Utilizando o v\u00eddeo do nosso exemplo, ao colar no editor de texto resulta o seguinte c\u00f3digo do iframe HTML:<\/p>\n Observe que o c\u00f3digo de incorpora\u00e7\u00e3o j\u00e1 traz algumas op\u00e7\u00f5es e atributos definidos. Voc\u00ea pode editar conforme suas necessidades, inclusive a altura e a largura do mesmo. Tamb\u00e9m recomendamos que a estiliza\u00e7\u00e3o do quadro iframe HTML seja feita atrav\u00e9s do CSS. Enfim, o c\u00f3digo de incorpora\u00e7\u00e3o acima resultou na renderiza\u00e7\u00e3o do nosso documento HTML conforme a imagem abaixo:<\/p>\n Voc\u00ea pode ler mais a respeito dos recurso de API do iframe do YouTube na documenta\u00e7\u00e3o desta API disponibilizada pelo Google<\/a>. Apesar de ser muito \u00fatil, o uso de iframe HTML deve ser bem planejado, pois a sua utiliza\u00e7\u00e3o aumenta o tempo de carregamento de uma p\u00e1gina.<\/p>\n Al\u00e9m disso, deve-se verificar bem o tipo de conte\u00fado que ser\u00e1 integrado. O elemento iframe HTML n\u00e3o representa nenhum risco de seguran\u00e7a. Por\u00e9m, ele permite inserir conte\u00fado e materiais provenientes de outras p\u00e1ginas. Portanto, \u00e9 necess\u00e1rio ter bastante aten\u00e7\u00e3o quando adicionar um iframe de outra p\u00e1gina, especialmente quando a mesma \u00e9 de um site n\u00e3o confi\u00e1vel. Ao utilizar um iframe de uma p\u00e1gina suspeita, isso pode comprometer a seguran\u00e7a da sua pr\u00f3pria p\u00e1gina, assim como a dos seus leitores.<\/p>\n Portanto, se voc\u00ea n\u00e3o tiver certeza quanto \u00e0 seguran\u00e7a de um site, n\u00e3o recomendamos utilizar iframes. Utilize o iframe apenas de p\u00e1ginas confi\u00e1veis ou que voc\u00ea tenha conhecimento quanto aos padr\u00f5es de seguran\u00e7a utilizados. N\u00e3o h\u00e1 duvidas de que o iframe HTML \u00e9 um recurso muito \u00fatil e que permitem incluir uma variedade de conte\u00fados em suas p\u00e1ginas web. Por\u00e9m, ainda assim, esse recurso tem algumas desvantagens. Dentre eles, conforme citado anteriormente, os iframes podem aumentar o tempo de carregamento da sua p\u00e1gina. Por isso, recomendamos que evitem o uso de muitos iframes dentro da mesma p\u00e1gina.<\/p>\n Claro que voc\u00ea pode utilizar outros recursos para diminuir o tempo de carregamento da p\u00e1gina. Para isso voc\u00ea deve carregar apenas os elementos que dever\u00e3o ficar vis\u00edveis na tela inicialmente, e os demais, seriam carregados posteriormente. Por\u00e9m, ainda assim, recomendamos n\u00e3o utilizar excessivamente os iframes de outras p\u00e1ginas. Utilize-os apenas se realmente for necess\u00e1rio, at\u00e9 para n\u00e3o perder a originalidade da sua pr\u00f3pria p\u00e1gina.<\/p>\n Agora que voc\u00ea j\u00e1 sabe como utilizar os iframes em seus documentos HTML, recomendamos que pratique e utilize os c\u00f3digos exemplificados neste artigo. Tamb\u00e9m recomendamos que teste alterar os atributos, assim como criar uma estiliza\u00e7\u00e3o para seus iframes. Por fim, experimente inclu\u00ed-los na sua p\u00e1gina HTML<\/a>. Com isso, voc\u00ea j\u00e1 estar\u00e1 pronto para utilizar os iframes HTML no desenvolvimento de p\u00e1ginas web<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Voc\u00ea provavelmente j\u00e1 visualizou um iframe HTML em diversas p\u00e1ginas da internet. Mas voc\u00ea sabe o que s\u00e3o? Neste artigo vamos entender o que s\u00e3o os iframes e como utiliz\u00e1-los no documento HTML. Portanto, os t\u00f3picos desse artigo s\u00e3o: O Que \u00e9 um iframe? A sintaxe do iframe HTML Atributos do iframe HTML Iframe HTML […]<\/p>\n","protected":false},"author":18,"featured_media":4013,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_helpful_status":1,"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3,4,229,20,6,164],"tags":[],"class_list":["post-4012","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-criar-sites","category-desenvolvedores","category-outros","category-php","category-tutoriais","category-wordpress-tutoriais"],"yoast_head":"\nO Que \u00e9 um iframe?<\/h2>\n
\n<\/a><\/p>\nA sintaxe do iframe HTML<\/h2>\n
<iframe src=\"https:\/\/www.homehost.com.br\"><\/iframe>\n<\/pre>\n
![\"Exemplo](\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/iframe01.jpg\")
<\/p>\n<iframe src=\"https:\/\/www.homehost.com.br\">\nSeu navegador n\u00e3o possui Suporte para este recurso...\n<\/iframe>\n\n<iframe src=\"https:\/\/www.homehost.com.br\"> \n<p>Seu navegador n\u00e3o possui Suporte para este recurso...<\/p> \n<img src=\"imagens\/iframe_naosuporta.png\">\n<\/iframe><\/pre>\n
Atributos do iframe HTML<\/h3>\n
O atributo src<\/h4>\n
<iframe src=\"https:\/\/www.homehost.com.br\"><\/iframe><\/pre>\n
<iframe src=\"sobre.html\"><\/iframe><\/pre>\n
Atributo de altura e largura<\/h4>\n
<iframe width=\"300px\" height=\"200px\" src=\"https:\/\/www.homehost.com.br\/\"><\/iframe><\/pre>\n
![\"Exemplo](\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/iframe02.jpg\")
<\/p>\n<iframe src=\"https:\/\/www.homehost.com.br\/\" style=\"width:300px;height:200px;\"<\/span><\/span>><\/span><\/span><<\/span>\/iframe><\/span><\/span><\/pre>\nO atributo allowfullscreen<\/h4>\n
<iframe src=\"https:\/\/www.youtube.com\/embed\/9P15WoXIzV4\" allowfullscreen><\/iframe><\/pre>\n
O atributo name<\/h4>\n
<iframe src=\"\" name=\"meu_iframe\"><\/iframe><\/pre>\n
Outros atributos<\/h4>\n
<iframe width=\"853\" height=\"480\" src=\"https:\/\/www.youtube.com\/embed\/9P15WoXIzV4\" \nallow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/pre>\n
\n<\/a><\/p>\nIframe HTML interativo com target links<\/h2>\n
<iframe src=\"\" name=\"meu_iframe\"><\/iframe><\/pre>\n
<iframe src=\"https:\/\/www.homehost.com.br\/\" name=\"meu_iframe\"><\/iframe><\/pre>\n
<iframe src=\"https:\/\/www.homehost.com.br\/\" name=\"meu_iframe\"><\/iframe>\n<p><a href=\"https:\/\/www.homehost.com.br\/\" target=\"meu_iframe\">HomeHost<\/a><\/p>\n<p><a href=\"https:\/\/www.homehost.com.br\/blog\" target=\"meu_iframe\">Blog HomeHost<\/a><\/p>\n<p><a href=\"https:\/\/www.w3schools.com\" target=\"meu_iframe\">W3Schools<\/a><\/p><\/pre>\n
\n<\/a><\/p>\nIncluindo v\u00eddeos do YouTube em suas p\u00e1ginas<\/h2>\n
![\"Copiar](\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/iframe_yt01.jpg\")
<\/p>\n![\"Copiar](\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/iframe_yt02.jpg\")
<\/p>\n<iframe width=\"853\" height=\"480\" src=\"https:\/\/www.youtube.com\/embed\/9P15WoXIzV4\" frameborder=\"0\" \nallow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/pre>\n
![\"Iframe](\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/iframe_yt03.jpg\")
<\/p>\n
\n<\/a><\/p>\nCuidados com o Iframe HTML<\/h2>\n
\n<\/a><\/p>\nConclus\u00f5es sobre os iframes HTML<\/h2>\n