Aprenda iframe con cursos y programas en línea

Hay muchos casos en los que podría querer compartir medios externos mientras mantiene a los visitantes en su página web en lugar de enlazar a un sitio web de terceros. Los iframes le permiten incorporar medios externos en su sitio web de manera fluida mientras mantiene el código separado. Los iframes incrustan videos, documentos, feeds de redes sociales, mapas, juegos interactivos y anuncios. Estos elementos tienen bordes definidos y pueden tener sus propias barras de desplazamiento. Mientras que los GIFs e imágenes son estáticos, un iframe completamente incrustado permite la creación de scripts, por lo que puede hacer que su elemento sea interactivo o rastrear impresiones de anuncios.

La etiqueta HTML <iframe> especifica un marco en línea. Para darle un ejemplo específico de iframe, un fragmento de código podría permitirle incrustar un mapa de Google. Entonces, ¿por qué podría ser útil aislar un elemento de su JavaScript y CSS? Bueno, en otra aplicación, un desarrollador podría querer que los usuarios tengan la capacidad de crear y guardar correos electrónicos basados en plantillas de vista previa. Para previsualizar los documentos de plantilla, todos con sus propios estilos únicos, el desarrollador elige el código iframe como la solución más limpia.

Embed cumple el mismo propósito que el código iframe, solo que con menos atributos. Por ejemplo, la etiqueta HTML 5 embed define atributos de altura, fuente, tipo y ancho, y se puede usar para animaciones Flash y complementos de navegador. Las etiquetas HTML iframe, por otro lado, pueden definir todo esto, así como atributos más avanzados como alineación, borde del marco, descripción larga, altura y ancho de margen, nombre, navegación en sandbox y barras de desplazamiento.

Un iframe es un tipo de código HTML, compatible con todos los principales navegadores web e incluido en las últimas especificaciones de HTML 5. HTML no es un lenguaje de programación; es un lenguaje de marcado utilizado para especificar la estructura, organización y diseño de un documento. En contraste, los lenguajes de programación como C#, JavaScript o Python escriben funciones, contienen lógica condicional y almacenan o manipulan datos. Puede escribir etiquetas HTML iframe en el código del lenguaje de programación de su elección.

iframe es una etiqueta HTML, que puede incluir propiedades CSS. Los desarrolladores pueden usar varios métodos diferentes para agregar CSS a un iframe. Pueden: usar CSS interno dentro de la etiqueta iframe; usar CSS interno para la etiqueta iframe dentro del archivo HTML; usar CSS externo para la etiqueta iframe creando un archivo diferente para el código CSS e incluyéndolo en el archivo HTML usando link y href etiquetas antes de la etiqueta iframe; o usar código JavaScript para agregar el enlace del archivo CSS en el encabezado del documento HTML.

Aunque un marco HTML y un iframe ambos incrustan un recurso directamente en otra página web, hay diferencias que vale la pena señalar. Debido a problemas de responsividad y accesibilidad, los marcos HTML ya no son compatibles en HTML 5. El elemento iframe, por otro lado, es compatible en HTML 5, por lo que vale la pena aprenderlo como una solución alternativa.