{"id":13991,"date":"2019-01-11T11:17:12","date_gmt":"2019-01-11T13:17:12","guid":{"rendered":"https:\/\/blog.hostinger.io\/br-tutoriais\/?p=13991"},"modified":"2023-05-26T11:57:00","modified_gmt":"2023-05-26T14:57:00","slug":"o-que-e-iframe","status":"publish","type":"post","link":"\/br\/tutoriais\/o-que-e-iframe","title":{"rendered":"O que \u00e9 iframe"},"content":{"rendered":"<p>iFrame &eacute; a abrevia&ccedil;&atilde;o de Inline Frame. &Eacute; um elemento poderoso quando se trata de webdesign.<\/p><p>Voc&ecirc; provavelmente j&aacute; viu diversos v&iacute;deos do <strong>YouTube<\/strong> que estavam incorporados em outros sites. Para al&eacute;m disso, um iFrame pode inserir todo tipo de m&iacute;dia.<\/p><p>E ent&atilde;o voc&ecirc; pode estar se perguntando como isso foi feito. O mais prov&aacute;vel &eacute; que o web designer colocou um elemento iFrame nessa p&aacute;gina.<\/p><p>Neste artigo, n&oacute;s vamos olhar com mais detalhes o que &eacute; iFrame e como funciona, e vamos falar sobre outros pontos que voc&ecirc; precisa saber antes de inserir um c&oacute;digo do tipo no seu documento HTML.<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/BR-Web-Development-Glossary-for-Beginners.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">Baixar Gloss&aacute;rio Completo de Desenvolvimento Web<\/a><\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-o-que-e-um-iframe\"><b>O Que &eacute; um iFrame<\/b><\/h2><p><span style=\"font-weight: 400\">Um iFrame &eacute; um c&oacute;digo em HTML que permite que um elemento seja exibido dentro de outro elemento. Somente poss&iacute;vel em p&aacute;ginas HTML,&nbsp; permite incorporar documentos, v&iacute;deos e m&iacute;dia interativa em uma p&aacute;gina. <\/span><\/p><p><span style=\"font-weight: 400\">Ao fazer isso, voc&ecirc; pode exibir uma p&aacute;gina secund&aacute;ria da web na sua p&aacute;gina principal.<\/span><\/p><p><span style=\"font-weight: 400\">O elemento desse tipo permite incluir um conte&uacute;do de outras origens. Ele pode integrar o conte&uacute;do em qualquer lugar da sua p&aacute;gina, sem precisar inclu&iacute;-los na estrutura do layout do seu site, como se fosse um elemento tradicional.<\/span><\/p><p><span style=\"font-weight: 400\">Mas nem por isso voc&ecirc; pode usar o iFrame de forma excessiva. Isso pode diminuir a velocidade da sua p&aacute;gina e colocar sua seguran&ccedil;a em risco, especialmente se voc&ecirc; incorporar conte&uacute;dos de alguns site suspeito. <\/span><\/p><p><span style=\"font-weight: 400\">Imagine-o como parte do seu conte&uacute;do, mas n&atilde;o parte do seu site. Por exemplo, se voc&ecirc; quer adicionar um v&iacute;deo do YouTube em um post para estimular os seus leitores, ent&atilde;o voc&ecirc; pode inserir um elemento do tipo nele.<\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-como-usar-o-iframe\"><b>Como Usar o iFrame<\/b><\/h2><p><span style=\"font-weight: 400\">At&eacute; aqui voc&ecirc; sabe que o iFrame &eacute; um elemento adicional para compartilhar conte&uacute;do de outros sites. Voc&ecirc; pode adicion&aacute;-lo como forma de contextualizar um determinado t&oacute;pico para os leitores. D&aacute; para inserir o elemento usando a tag <\/span><b>&lt;iframe&gt; <\/b><span style=\"font-weight: 400\">em um documento HTML. Copie o c&oacute;digo abaixo e cole-o no bloco de notas e salve o arquivo como formato .<\/span><b>html<\/b><span style=\"font-weight: 400\">:<\/span><\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;iframe src=\"https:\/\/www.youtube.com\/embed\/gQpdDWVdLQM width=\"680\" height=\"480\" allowfullscreen&gt;&lt;\/iframe&gt;<\/pre><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"637\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/youtube-embbed-iframe.jpg\/public\" alt=\"exemplo de um v&iacute;deo do youtube incorporado usando o iframe\" class=\"wp-image-36943\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/youtube-embbed-iframe.jpg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/youtube-embbed-iframe.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/youtube-embbed-iframe.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/youtube-embbed-iframe.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p><span style=\"font-weight: 400\">O c&oacute;digo acima exibir&aacute; um v&iacute;deo tutorial do YouTube feito por n&oacute;s, da Hostinger. Vamos examinar cada tag separadamente:<\/span><\/p><p>A tag &lt;iframe&gt;&hellip;&lt;\/iframe&gt; &eacute; usada para que seja inserido o v&iacute;deo dentro do conte&uacute;do.<\/p><ul class=\"wp-block-list\">\n<li>O <strong>iFrame source (src)<\/strong> &eacute; a origem do conte&uacute;do, seja do servidor interno o externo. N&atilde;o se esque&ccedil;a de incorporar o c&oacute;digo na url.<\/li>\n\n\n\n<li><strong>Width&nbsp;(largura)<\/strong> e <strong>height (altura)<\/strong> s&atilde;o os aspectos visuais. Voc&ecirc; pode inserir uma medida fixa como 680&times;480 pixels (px) no exemplo. Ou, voc&ecirc; pode usar o m&eacute;todo de porcentagem (10%-100%) na qual o conte&uacute;do ser&aacute; ajustado automaticamente.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-ameacas-e-seguranca\"><b>Amea&ccedil;as e Seguran&ccedil;a<\/b><\/h2><p><span style=\"font-weight: 400\">Por natureza, o elemento iFrame n&atilde;o representa nenhum risco de seguran&ccedil;a para sua p&aacute;gina ou para seus leitores. O c&oacute;digo foi desenvolvido para ajudar os criadores de conte&uacute;do a adicionar um material que fosse visualmente atraente aos leitores, como os v&iacute;deos. No entanto, voc&ecirc; precisa prestar mais aten&ccedil;&atilde;o quando for adicionar um conte&uacute;do vindo de um site do site pouco confi&aacute;vel.<\/span><\/p><p><span style=\"font-weight: 400\">Houve um surto de uso de c&oacute;digo iFrame em alguns sites populares, como o ABC News, em 2008. Esse tipo de ataque redireciona os visitantes para um site malicioso, que instala um v&iacute;rus no computador do visitante ou tenta roubar informa&ccedil;&otilde;es confidenciais. &Eacute; por isso que n&atilde;o &eacute; recomendado incluir o iFrame como parte integrante do seu site.<\/span><\/p><p><span style=\"font-weight: 400\">Se voc&ecirc; tem d&uacute;vidas sobre a seguran&ccedil;a de um site, n&atilde;o perca seu tempo linkando este site no seu conte&uacute;do com o iFrame. <\/span><\/p><figure class=\"wp-block-image size-large\"><a href=\"\/br\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-32927\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><b>Conclus&atilde;o<\/b><\/h2><p><span style=\"font-weight: 400\">O iFrame &eacute; um elemento poderoso se voc&ecirc; quiser mais engajamento para seus visitantes. Tenha o iFrame como parte do conte&uacute;do que voc&ecirc; produz, n&atilde;o como parte integral do seu site. <\/span><\/p><p><span style=\"font-weight: 400\">Voc&ecirc; n&atilde;o deve usar excessivamente o iFrame. &Eacute; bem melhor se voc&ecirc; puder desenvolver seu site sem o elemento iFrame. Se voc&ecirc; ainda precisar us&aacute;-lo para fins de desenvolvimento, lembre-se apenas de usar o conte&uacute;do de um site de sua confian&ccedil;a. <\/span><\/p><p><span style=\"font-weight: 400\">Esperamos que este artigo tenha ajudado voc&ecirc; a entender como usar o iFrame! Nos vemos na pr&oacute;xima.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>iFrame &eacute; a abrevia&ccedil;&atilde;o de Inline Frame. &Eacute; um elemento poderoso quando se trata de webdesign. Voc&ecirc; provavelmente j&aacute; viu diversos v&iacute;deos do YouTube que estavam incorporados em outros sites. Para al&eacute;m disso, um iFrame pode inserir todo tipo de m&iacute;dia. E ent&atilde;o voc&ecirc; pode estar se perguntando como isso foi feito. O mais prov&aacute;vel [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/o-que-e-iframe\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":78,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"O que \u00e9 iFrame: Aprenda e Otimize seu Conte\u00fado na Internet","rank_math_description":"Entenda o que \u00e9 iFrame (Inline Frame) e como este recurso pode melhorar a forma como voc\u00ea apresenta o seu conte\u00fado na web.","rank_math_focus_keyword":"o que \u00e9 iframe","footnotes":""},"categories":[5602],"tags":[6198,6197],"class_list":["post-13991","post","type-post","status-publish","format-standard","hentry","category-glossario","tag-iframe","tag-o-que-e-iframe"],"hreflangs":[{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/o-que-e-iframe","default":1},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/o-que-e-iframe","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/13991","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/78"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=13991"}],"version-history":[{"count":16,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/13991\/revisions"}],"predecessor-version":[{"id":36945,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/13991\/revisions\/36945"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=13991"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=13991"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=13991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}