{"id":8400,"date":"2019-04-26T19:52:06","date_gmt":"2019-04-26T19:52:06","guid":{"rendered":"https:\/\/blog.hostinger.io\/com-ar-tutoriales\/?p=8400"},"modified":"2025-01-20T18:13:32","modified_gmt":"2025-01-20T17:13:32","slug":"que-es-iframe","status":"publish","type":"post","link":"\/ar\/tutoriales\/que-es-iframe","title":{"rendered":"\u00bfQu\u00e9 es un iFrame? Usos y consejos de seguridad"},"content":{"rendered":"<p>iFrame es la abreviatura de Inline Frame y es un elemento poderoso en el <a href=\"\/ar\/tutoriales\/inspiracion-disenos-web\">dise&ntilde;o web<\/a>. Probablemente hayas visto innumerables videos de YouTube insertados en sitios distintos a YouTube. Un iFrame puede insertar todo tipo de medios. <\/p><p>Entonces si te preguntas c&oacute;mo lo hicieron, lo m&aacute;s probable es que el dise&ntilde;ador web haya puesto un elemento iFrame dentro de esa p&aacute;gina.<\/p><p>En este art&iacute;culo, analizaremos m&aacute;s de cerca qu&eacute; es un iFrame y c&oacute;mo usarlo, y hablaremos sobre otras cosas que vale la pena tener en cuenta antes de colocar un iFrame en tu documento <a href=\"\/ar\/tutoriales\/que-es-html\/\">HTML<\/a>.<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/ES-Web-Development-Glossary-for-Beginners.pdf\" target=\"_blank\" rel=\"noopener\">Descarga Glosario Completo de Desarrollo Web<\/a><br><\/p><h2 class=\"wp-block-heading\" id=\"h-que-es-un-iframe\">&iquest;Qu&eacute; es un iFrame?<\/h2><p>Un iFrame es un marco (frame) dentro de un marco. Es un componente de un elemento HTML que permite incrustar documentos, videos y medios interactivos dentro de una p&aacute;gina. Al hacer esto, puedes mostrar una p&aacute;gina web secundaria en su p&aacute;gina principal.<\/p><p>El elemento iFrame permite incluir un fragmento de contenido de otras fuentes. Puede integrar el contenido en cualquier lugar dentro de tu p&aacute;gina, sin tener que incluirlos en la estructura de tu dise&ntilde;o web, como un elemento tradicional.<\/p><p>Sin embargo, no es bueno usar el iFrame en exceso, ya que puede poner lenta tu p&aacute;gina y ser un riesgo para la seguridad, especialmente si utilizas contenido de un sitio web sospechoso. Puedes pensar en un iFrame como una parte de tu contenido, pero no como parte de tu sitio. Por ejemplo, si quieres agregar un video de YouTube para aportar valor a tus lectores, puedes insertar un elemento iFrame en ese post.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-usar-iframe\">C&oacute;mo usar iFrame<\/h2><p>Ahora ya sabes que iFrame es un elemento adicional para compartir contenido de otros sitios. Puedes agregarlo para darle a los lectores un contexto sobre un tema determinado. Tambi&eacute;n es posible insertar un elemento iFrame utilizando la etiqueta <strong>&lt;iframe&gt;<\/strong> en un documento HTML. Copia el c&oacute;digo siguiente, p&eacute;galo en el bloc de notas y guarda el archivo en formato .html:<\/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\/dXBohfjc4WA\" width=\"680\" height=\"480\" allowfullscreen&gt;&lt;\/iframe&gt;<\/pre><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"666\" src=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2019\/04\/iframe-ejemplo-codigo-youtube.jpg\" alt=\"Ejemplo de iframe\" class=\"wp-image-8401\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2019\/04\/iframe-ejemplo-codigo-youtube.jpg 900w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2019\/04\/iframe-ejemplo-codigo-youtube-150x111.jpg 150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2019\/04\/iframe-ejemplo-codigo-youtube-300x222.jpg 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2019\/04\/iframe-ejemplo-codigo-youtube-768x568.jpg 768w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2019\/04\/iframe-ejemplo-codigo-youtube-74x55.jpg 74w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2019\/04\/iframe-ejemplo-codigo-youtube-111x83.jpg 111w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>El c&oacute;digo anterior mostrar&aacute; un video tutorial de YouTube creado por Hostinger. Ahora examinemos cada etiqueta por separado:<\/p><ul class=\"wp-block-list\">\n<li>La etiqueta &lt;iframe&gt;&hellip; &lt;\/iframe&gt; se usa para contener el video dentro del iFrame.<\/li>\n\n\n\n<li>El fuente de iFrame (src) es el origen del contenido del servidor externo o interno. No olvides poner el c&oacute;digo incrustado en la <a href=\"\/ar\/tutoriales\/que-es-una-url\">URL<\/a>.<\/li>\n\n\n\n<li>Ancho y alto es la relaci&oacute;n de aspecto del iFrame. Puedes insertar un tama&ntilde;o fijo como 680 &times; 480 p&iacute;xeles (px) como en el ejemplo. O bien, puedes utilizar un m&eacute;todo basado en el porcentaje (10%-100%) para ajustar el iFrame autom&aacute;ticamente.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-riesgos-de-seguridad\">Riesgos de seguridad<\/h2><p>Por naturaleza, el elemento iFrame no representa ning&uacute;n riesgo de seguridad para tu p&aacute;gina web o tus lectores. En parte, fue desarrollado para ayudarle a los creadores de contenido a agregar material visualmente atractivo para los lectores. Sin embargo, debes prestar atenci&oacute;n al agregar un iFrame de un sitio web no confiable.<\/p><p>Hubo una oleada de inyecci&oacute;n de c&oacute;digo iFrame en algunos sitios web leg&iacute;timos, como ABC News, en el 2008. Este tipo de ataque redirige a los visitantes a un sitio malicioso, que luego instalar&aacute; un virus en la PC de los visitantes o intentar&aacute; robar informaci&oacute;n confidencial. Por eso no se recomienda incluir iFrame como parte integral de tu sitio web.<\/p><p>Si crees que un sitio web no es seguro, ni siquiera te molestes en enlazarlo y no pongas su contenido en tu elemento iFrame.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/ar\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/blog.hostinger.io\/com-ar-tutoriales\/wp-content\/uploads\/sites\/38\/2023\/02\/ES-Web-hosting_in-text-banner-1024x300.png\" alt=\"\" class=\"wp-image-29291\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2023\/02\/ES-Web-hosting_in-text-banner.png 1024w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2023\/02\/ES-Web-hosting_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2023\/02\/ES-Web-hosting_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2023\/02\/ES-Web-hosting_in-text-banner-768x225.png 768w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2023\/02\/ES-Web-hosting_in-text-banner-1536x450.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p>En general, iFrame es un elemento poderoso si quieres m&aacute;s involucramiento por parte de tus visitantes. Piensa en iFrame como una parte del contenido que creas, pero no como una parte integral de tu sitio web. <\/p><p>Tampoco debes usar el iFrame en exceso; es mejor si puedes desarrollar tu sitio sin iFrame. Y si a&uacute;n necesitas usarlo para fines de desarrollo, recuerda que solo debes usar el contenido de sitios confiables.<\/p><p>Esperamos que este art&iacute;culo te haya sido &uacute;til para implementar y comprender iFrame.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>iFrame es la abreviatura de Inline Frame y es un elemento poderoso en el dise&ntilde;o web. Probablemente hayas visto innumerables videos de YouTube insertados en sitios distintos a YouTube. Un iFrame puede insertar todo tipo de medios. Entonces si te preguntas c&oacute;mo lo hicieron, lo m&aacute;s probable es que el dise&ntilde;ador web haya puesto un [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ar\/tutoriales\/que-es-iframe\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":85,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"\u00bfQu\u00e9 Es Un iFrame?","rank_math_description":"Aprende qu\u00e9 es un iFrame junto con sus principales caracter\u00edsticas. Adem\u00e1s te explicamos los riesgos asociados al hacer uso de este elemento.","rank_math_focus_keyword":"que es un iframe","footnotes":""},"categories":[8284],"tags":[],"class_list":["post-8400","post","type-post","status-publish","format-standard","hentry","category-glosario"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/what-is-iframe","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/que-es-iframe","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/apa-itu-iframe","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/what-is-iframe","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/what-is-iframe\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/what-is-iframe\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/que-es-iframe","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/que-es-iframe","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/que-es-iframe","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/what-is-iframe","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/what-is-iframe","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/what-is-iframe","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/what-is-iframe","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts\/8400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/comments?post=8400"}],"version-history":[{"count":5,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts\/8400\/revisions"}],"predecessor-version":[{"id":44896,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts\/8400\/revisions\/44896"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/media?parent=8400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/categories?post=8400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/tags?post=8400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}