La etiqueta HTML `iframe`

Descubra los conceptos básicos para trabajar con la etiqueta `iframe` de HTML

La iframeetiqueta nos permite incrustar contenido procedente de otros orígenes (otros sitios) en nuestra página web.

Técnicamente, un iframe crea un nuevo contexto de navegación anidado. Esto significa que nada en el iframe interfiere con la página principal y viceversa. JavaScript y CSS no se “filtran” hacia/desde los iframes.

Muchos sitios utilizan iframes para realizar diversas tareas. Es posible que conozcas Codepen, Glitch u otros sitios que te permiten codificar en una parte de la página y ver el resultado en un cuadro. Eso es un iframe.

Puedes crear uno de esta manera:

iframe src="page.html"/iframe

También puedes cargar una URL absoluta:

iframe src="https://site.com/page.html"/iframe

Puede establecer un conjunto de parámetros de ancho y alto (o establecerlos mediante CSS); De lo contrario, el iframe utilizará los valores predeterminados, un cuadro de 300×150 píxeles:

iframe src="page.html"/iframe

El srcdocatributo le permite especificar HTML en línea para mostrar. Es una alternativa src, pero es reciente y no es compatible con Edge 18 y versiones anteriores, ni con IE:

iframe srcdoc="pMy dog is a good dog/p"/iframe

El sandboxatributo nos permite limitar las operaciones permitidas en los iframes.

Si lo omitimos, todo está permitido:

iframe src="page.html"/iframe

Si lo establecemos en “”, no se permite nada:

iframe src="page.html" sandbox=""/iframe

Podemos seleccionar qué permitirá agregar opciones en el sandboxatributo. Puedes permitir varias opciones agregando un espacio entre ellas. Aquí hay una lista incompleta de las opciones que puedes usar:

• allow-forms:permitir enviar formularios
• allow-modalsPermite abrir ventanas modales, incluida la llamada alert()en JavaScript.
• allow-orientation-lockpermitir bloquear la orientación de la pantalla
• allow-popupsPermitir ventanas emergentes, uso window.open()y target="_blank"enlaces
• allow-same-originTratar el recurso que se está cargando como si tuviera el mismo origen
• allow-scriptspermite que el iframe cargado ejecute scripts (pero no cree ventanas emergentes).
• allow-top-navigationDa acceso al iframe al contexto de navegación de nivel superior.

Actualmente experimental y compatible únicamente con navegadores basados ​​en Chromium, este es el futuro del intercambio de recursos entre la ventana principal y el iframe.

Es similar al sandboxatributo, pero nos permite permitir características específicas, entre ellas:

• accelerometerda acceso a la interfaz del acelerómetro de la API de sensores
• ambient-light-sensorda acceso a la interfaz AmbientLightSensor de la API de sensores
• autoplayPermite reproducir automáticamente archivos de vídeo y audio.
• camerapermite acceder a la cámara desde la API getUserMedia
• display-capturepermite acceder al contenido de la pantalla utilizando la API getDisplayMedia
• fullscreenpermite acceder al modo de pantalla completa
• geolocationpermite acceder a la API de Geolocalización
• gyroscopeda acceso a la interfaz del giroscopio de la API de sensores
• magnetometerda acceso a la interfaz del magnetómetro de la API de sensores
• microphoneda acceso al micrófono del dispositivo mediante la API getUserMedia
• midipermite el acceso a la API Web MIDI
• paymentda acceso a la API de solicitud de pago
• speakerpermite el acceso a la reproducción de audio a través de los altavoces del dispositivo
• usbdesde el acceso a la API WebUSB.
• vibrateda acceso a la API de vibración
• vrdesde el acceso a la API WebVR

Al cargar un iframe, el navegador le envía información importante sobre quién lo está cargando en el Refererencabezado (note el único r, un error tipográfico con el que debemos vivir).

El error ortográfico de referencia se originó en la propuesta original del científico informático Phillip Hallam-Baker de incorporar el campo a la especificación HTTP. El error ortográfico quedó grabado en piedra cuando se incorporó al documento de estándares de Solicitud de comentarios RFC 1945.

El referrerpolicyatributo nos permite configurar el referente que se enviará al iframe al cargarlo. El referente es un encabezado HTTP que permite que la página sepa quién está cargando. Estos son los valores permitidos:

• no-referrer-when-downgradeEs el valor predeterminado y envía el referencia cuando la página actual se carga a través de HTTPS y el iframe se carga en el protocolo HTTP.
• no-referrerNo envía el encabezado de referencia
• originSe envía el referente y solo contiene el origen (puerto, protocolo, dominio), no el origen + ruta que es el predeterminado
• origin-when-cross-originAl cargar desde el mismo origen (puerto, protocolo, dominio) en el iframe, el referente se envía en su forma completa (origen + ruta). De lo contrario, solo se envía el origen.
• same-originEl referente se envía solo cuando se carga desde el mismo origen (puerto, protocolo, dominio) en el iframe
• strict-originEnvía el origen como referencia si la página actual se carga mediante HTTPS y el iframe también se carga mediante el protocolo HTTPS. No envía nada si el iframe se carga mediante HTTP
• strict-origin-when-cross-originEnvía el origen + ruta como referencia cuando se trabaja en el mismo origen. Envía el origen como referencia si la página actual se carga mediante HTTPS y el iframe también se carga mediante el protocolo HTTPS. No envía nada si el iframe se carga mediante HTTP
• unsafe-url: envía el origen + ruta como referencia incluso cuando se cargan recursos desde HTTP y la página actual se carga a través de HTTPS

Tips de HTML

Tal vez te puede interesar:

1. Formularios HTML
2. Cómo cargar una imagen en un lienzo HTML
3. Cómo utilizar insertAdjacentHTML
4. Cómo cambiar la URL de una imagen HTML en modo oscuro