Saltar la navegación

Iframes en detalle

Entonces, fue fácil y divertido ¿verdad? Los elementos <iframe> están diseñados para permitirte incrustar documentos web en el documento actual. Esto es excelente para incorporar contenido de terceros en tu sitio web sobre el que no tengas control directo y no quieras tener que implementar tu propia versión — como vídeo de proveedores de vídeo en línea, sistemas de comentarios como Disqus, mapas de proveedores de mapas en línea, banners publicitarios, etc. Los ejemplos editables que has estado usando a través de este curso se implementan usando <iframe>s.

Hay algunos serios Security concerns a considerar con <iframe>s, también se discute a continuación, pero esto no significa que debas dejar de usarlos en tus sitios web — solo requiere un poco de conocimiento y pensar cuidadosamente. Vamos a explorar el código con un poco más de detalle. Supongamos que quieres incluir el glosario de MDN en una de tus páginas web — podrías intentar algo como esto:

Este ejemplo incluye los elementos básicos necesarios para usar un <iframe>:

allowfullscreen

Si está configurado, el <iframe> se puede colocar en modo pantalla completa usando el Full Screen API (El uso del API está fuera del alcance de este artículo.)

frameborder

Si se establece en 1, esto le indica al navegador que dibuje un borde entre este marco y otros marcos, que es el comportamiento predeterminado. 0 elimina el borde. Usar esto ya no es realmente recomendable, ya que el mismo efecto se puede lograr mejor usandoborder: none; en tu CSS.

src

Este atributo, como con <video>/<img>,contiene una ruta que apunta a la URL del documento que se va a incrustar.

width and height

Estos atributos especifican el ancho y la altura (width y height) que quieres que tenga el iframe.

Contenido de reserva

De la misma manera que otros elementos similares <video>, puedes incluir contenido alternativo entre las etiquetas de apertura y cierre <iframe></iframe> que aparecerán si el navegador no admite el <iframe>. En este caso hemos incluido un enlace a la página. Es poco probable que encuentres algún navegador que no admita <iframe>s en estos días.

sandbox

Este atributo, que funciona en navegadores un poco más modernos que el resto de la funciones de <iframe> (por ejemplo IE 10 y superior) solicita una mayor configuración de seguridad; bueno, hablaremos más sobre esto en la siguiente sección.

Nota:

Para mejorar la velocidad, es una buena idea establecer el atributo src de iframes con JavaScript después de que se cargue el contenido principal. Esto hace que tu página pueda utilizarse antes y disminuye el tiempo de carga de tu página principal (an important SEO.)