{"id":1083,"date":"2020-01-31T22:53:01","date_gmt":"2020-02-01T01:53:01","guid":{"rendered":"https:\/\/www.souzahost.com\/tutoriais\/?p=1083"},"modified":"2021-06-02T07:55:16","modified_gmt":"2021-06-02T10:55:16","slug":"o-que-e-iframe","status":"publish","type":"post","link":"https:\/\/www.holahost.com.br\/tutoriais\/o-que-e-iframe\/","title":{"rendered":"O Que \u00e9 iFrame?"},"content":{"rendered":"\n<p><i>i<\/i><b><i>Frame <\/i><\/b>\u00e9 a redu\u00e7\u00e3o para <b><i>Inline Frame<\/i><\/b>. Ele \u00e9 um elemento amplamente usado no campo do web design, permitindo que o usu\u00e1rio insira qualquer tipo de m\u00eddia na estrutura de c\u00f3digos de um site. Hoje voc\u00ea vai aprender mais sobre <b>o que \u00e9 iframe<\/b> , como funciona e como fazer para colocar um c\u00f3digo HTML de conte\u00fados na sua p\u00e1gina.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2><span id=\"O-Que-e-iFrame\" class=\"ez-toc-section\"><b>O Que \u00e9 iFrame<\/b><\/span><\/h2>\n\n\n\n<p>iFrame pode ser adaptado do ingl\u00eas como <em>quadro<\/em>, <em>estrutura<\/em>, <em>composi\u00e7\u00e3o<\/em>, <em>trecho<\/em> ou <em>forma\u00e7\u00e3o<\/em>. No contexto da computa\u00e7\u00e3o, o iFrame \u00e9 um <strong>trecho de c\u00f3digo HTML<\/strong> que pode ser inserido em qualquer parte de um site.<\/p>\n\n\n\n<p>Com ele, o usu\u00e1rio consegue incorporar conte\u00fados de diferentes formatos e estilos. \u00c9 poss\u00edvel inserir documentos para baixar, fotos, v\u00eddeos, imagens e sons. Al\u00e9m de outros tipos de m\u00eddias interativas, como games e question\u00e1rios com op\u00e7\u00f5es de escolha.<\/p>\n\n\n\n<p>Essa integra\u00e7\u00e3o de conte\u00fado acontece atrav\u00e9s do simples posicionamento de um c\u00f3digo j\u00e1 formatado e dispon\u00edvel em outras fontes. \u00c9 poss\u00edvel posicionar o conte\u00fado onde o usu\u00e1rio achar melhor, sem ter que realmente coloc\u00e1-lo na estrutura geral de layout da p\u00e1gina.<\/p>\n\n\n\n<p>Para entender melhor, considere que o iFrame \u00e9 parte do seu conte\u00fado, mas n\u00e3o exatamente do seu site. Por exemplo, voc\u00ea pode incorporar um v\u00eddeo do YouTube diretamente na sua p\u00e1gina. Mas ele n\u00e3o pertence ao seu site (ele est\u00e1 armazenado na plataforma de v\u00eddeos).<\/p>\n\n\n\n<p>Contudo, n\u00e3o \u00e9 muito indicado usar c\u00f3digos iFrame para todas as fun\u00e7\u00f5es de um site. Ele pode fazer uma p\u00e1gina ficar mais lenta e at\u00e9 mesmo colocar tudo em risco, caso a fonte do c\u00f3digo n\u00e3o seja muito confi\u00e1vel.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2><span id=\"Como-Usar-iFrame-em-um-Site\" class=\"ez-toc-section\"><b>Como Usar iFrame em um Site?<\/b><\/span><\/h2>\n\n\n\n<p>\u00c9 hora de aprender a como inserir um c\u00f3digo iframe em uma parte estrutural do seu site. \u00c9 dessa forma que \u00e9 poss\u00edvel compartilhar conte\u00fados de outras p\u00e1ginas nas suas pr\u00f3prias p\u00e1ginas.<\/p>\n\n\n\n<p>\u00c9 poss\u00edvel inserir um elemento iFrame em uma p\u00e1gina usando a simples <b>tag &lt;iframe&gt;<\/b> no documento HTML desta mesma p\u00e1gina. Por exemplo, digamos que queremos inserir um v\u00eddeo qualquer em uma p\u00e1gina.<\/p>\n\n\n\n<p>Tudo o que \u00e9 preciso fazer \u00e9 copiar e colar o c\u00f3digo abaixo no documento HTML do documento da p\u00e1gina em que voc\u00ea quer exibi-lo.<\/p>\n\n\n\n<div class=\"EnlighterJSWrapper enlighterEnlighterJSWrapper\"><code><span class=\"\">&lt;iframe src=<\/span><span class=\"st0\">\"https:\/\/www.youtube.com\/watch?v=0u3AZdwNveQ\"<\/span><span class=\"\"> width=<\/span><span class=\"st0\">\"680\"<\/span><span class=\"\"> height=<\/span><span class=\"st0\">\"480\"<\/span><span class=\"\"> allowfullscreen&gt;&lt;\/iframe&gt;<\/span><\/code><\/div>\n\n\n\n<div>&nbsp;<\/div>\n\n\n\n<p>O c\u00f3digo acima vai abrir um v\u00eddeo sobre o WordPress. Algo que vai gerar um resultado na p\u00e1gina pr\u00f3ximo da imagem de exibi\u00e7\u00e3o abaixo.<\/p>\n\n\n\n<figure><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/watch?v=0u3AZdwNveQ\" allowfullscreen=\"allowfullscreen\" width=\"680\" height=\"480\"><\/iframe><\/figure>\n\n\n\n<p>Vamos desdobrar cada trecho do c\u00f3digo e entender o que cada um&nbsp; significa abaixo.<\/p>\n\n\n\n<ul><li><b>&lt;iframe&gt;&lt;\/iframe&gt;<\/b> \u2013 \u00e9 o intervalo em que o c\u00f3digo de origem de qualquer tipo de conte\u00fado deve ser inserido ser agregado em uma p\u00e1gina.<\/li><li><b>SRC (source) <\/b>\u2013 \u00e9 a origem do conte\u00fado, sendo necess\u00e1rio colocar a URL da fonte do conte\u00fado.<\/li><li><b>Width<\/b> \u2013 \u00e9 a largura do arquivo do conte\u00fado adicionado a uma p\u00e1gina. No caso do exemplo, \u00e9 680 pixels de exibi\u00e7\u00e3o para o v\u00eddeo.<\/li><li><b>Height<\/b> \u2013 \u00e9 a altura do arquivo do conte\u00fado adicionado a uma p\u00e1gina. No caso do exemplo, \u00e9 de 480 pixels para a exibi\u00e7\u00e3o do v\u00eddeo.<\/li><li><b>Allowfullscreen<\/b> \u2013 permite que o conte\u00fado (o v\u00eddeo, neste caso), seja exibido e visualizado em tela cheia no navegador e na tela do usu\u00e1rio.<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2><span id=\"Questoes-de-Seguranca-e-Ameacas-na-Web\" class=\"ez-toc-section\"><b>Quest\u00f5es de Seguran\u00e7a e Amea\u00e7as na Web<\/b><\/span><\/h2>\n\n\n\n<p>Pela sua pr\u00f3pria natureza de codifica\u00e7\u00e3o, um iFrame n\u00e3o \u00e9 para colocar um site e nem os visitantes dele sob riscos de seguran\u00e7a. E tamb\u00e9m \u00e0 merc\u00ea de amea\u00e7as virtuais e golpes pela internet.<\/p>\n\n\n\n<p>Em suma, o iFrame foi desenvolvido para ajudar os criadores de conte\u00fado a criar p\u00e1ginas e materiais visualmente atrativos para seus leitores. E, por conta disso, \u00e9 preciso ter um certo cuidado na hora de posicionar iframes de fontes suspeitas.<\/p>\n\n\n\n<p>Historicamente, saiba que, por volta de 2008, um surto de inje\u00e7\u00e3o de iframes nocivos comprometeu muitos sites da internet. Grandes portais, como o da ABC News, foram invadidos por conta de c\u00f3digos maliciosos.<\/p>\n\n\n\n<p>O que acontece \u00e9 que, este tipo de ataque redireciona o acesso do visitante para uma p\u00e1gina aleat\u00f3ria infectada, instalando um v\u00edrus no computador do usu\u00e1rio. O resultado \u00e9 o roubo de informa\u00e7\u00f5es e o comprometimento da m\u00e1quina.<\/p>\n\n\n\n<p>Por isso, n\u00e3o \u00e9 recomendado inserir qualquer c\u00f3digo iframe html no seu site. Quando estiver navegando pela internet, nunca pegue um c\u00f3digo suspeito e insira no conte\u00fado do seu site. Por mais vantajoso e promissor que ele possa parecer.<\/p>\n\n\n\n<blockquote><h2><span id=\"Consideracoes-Finais\" class=\"ez-toc-section\"><b>Considera\u00e7\u00f5es Finais<\/b><\/span><\/h2><p>Se voc\u00ea quer colocar qualquer conte\u00fado de outras p\u00e1ginas no seu pr\u00f3prio site, o que voc\u00ea vai precisar fazer \u00e9 copiar e inserir a tag iFrame dele no documento HTML das suas p\u00e1ginas. S\u00f3 se certifique que a origem deste c\u00f3digo seja de proced\u00eancia confi\u00e1vel para n\u00e3o comprometer a seguran\u00e7a do seu projeto online.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>iFrame \u00e9 a redu\u00e7\u00e3o para Inline Frame. Ele \u00e9 um elemento amplamente usado no campo do web design, permitindo que o usu\u00e1rio insira qualquer tipo de m\u00eddia na estrutura de c\u00f3digos de um site. Hoje voc\u00ea vai aprender mais sobre o que \u00e9 iframe , como funciona e como fazer para colocar um c\u00f3digo HTML [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5534,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[50,51,52,29],"_links":{"self":[{"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/posts\/1083"}],"collection":[{"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/comments?post=1083"}],"version-history":[{"count":1,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/posts\/1083\/revisions"}],"predecessor-version":[{"id":5535,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/posts\/1083\/revisions\/5535"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/media\/5534"}],"wp:attachment":[{"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/media?parent=1083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/categories?post=1083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/tags?post=1083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}