Una de las etiquetas que los desarrolladores web usan con más frecuencia tiene que ver con la inserción de contenidos desde fuentes externas. La etiqueta iframe en HTML cumple con la función de insertar documentos HTML dentro de una página web. Si quieres saber cómo funciona, este post es ideal para ti.
¿Cómo funciona iframe?
La etiqueta iframe en HTML nos permite visualizar un documento HTML u otra página web dentro de nuestra web. Es un espacio dentro de nuestra página web, denominado marco, en el que se muestra la otra página web con sus propias cualidades. Es decir, con sus propios estilos, contenidos, historiales de sesión y enlaces.
Cuando se ejecuta un iframe dentro de nuestra página web, debemos entender cómo funciona esta etiqueta. En el momento en que se activa el iframe, se cargan y se procesan los datos de forma independiente y a cargo de la página web externa. Sin embargo, cada documento HTML que se cargue en nuestra página tendrá un gasto de memoria y de recursos informáticos. Por lo tanto, un uso excesivo de iframes podría causar un rendimiento bajo de nuestra página.
Ahora veamos cómo se construye la etiqueta iframe en HTML:
//Cómo hacer un iframe
<iframe src= "pagina_fuente.html" width=400 height=300>"No es posible visualizar el contenido"</iframe>De esta forma, incrustamos una página web externa en un espacio de 400px de ancho y 300px de alto.
Atributos de la etiqueta iframe en HTML
La etiqueta iframe permite los atributos globales, aunque algunos no producen ningún cambio en el iframe. Los siguientes son los atributos propios de esta etiqueta o tag iframe y los más importantes:
| Atributo | Definición |
| src | La URL de la página a insertar. |
| width | Indica el ancho del marco donde se va mostrar la página web externa. Medida en píxeles o porcentaje. |
| height | Indica la altura del marco donde se va mostrar la página web externa. Medida en píxeles o porcentaje. |
| allowfullscreen | Atributo tipo booleano. Activa, de ser posible, el modo pantalla completa. |
| id | Identificador de iframe para usarse en código de JavaScript. |
| name | Define un nombre objetivo para el iframe con el fin de ser fácilmente reconocible, usado en enlaces o llamadas al iframe desde JavaScript. |
| scrolling | Permite la inserción de barras de desplazamiento dentro del iframe. Se puede definir de 3 formas: Yes/No/Auto. Por defecto se encuentra activado Auto. |
Ejemplos de iframe
La etiqueta iframe en HTML se usa de muchas formas, dependiendo de las necesidades del desarrollador. Sin embargo, es muy común encontrar una etiqueta iframe cuando hay un vídeo de una plataforma externa, un formulario de suscripción o banners publicitarios.
Vamos a ver un ejemplo sencillo en el que ponemos esta página dentro de la misma. Para eso, vamos a utilizar el siguiente código:
<iframe src="https://keepcoding.io/blog/la-etiqueta-iframe-en-html/" width=400 height=300>"No es posible visualizar el contenido"</iframe>Y este es el resultado:
Veamos un ejemplo bastante común: la inserción de vídeos de YouTube en nuestra página web. El siguiente iframe es la clase piloto de nuestro programa de desarrollo web que tenemos en YouTube:
//embeber una pagina web en otra
<iframe width="560" height="315" src="https://www.youtube.com/embed/LRTOUqLmuAU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Más etiquetas de HTML
En definitiva, la etiqueta iframe en HTML se usa mucho en las páginas web, pero no es la única etiqueta. Existen diferentes tipos de etiquetas que todo buen desarrollador web debe conocer. No obstante, si quieres profundizar en HTML, te aconsejamos que le eches un vistazo a este excelente Curso de Desarrollo Web con HTML5 y CSS. ¡Apúntate!
