La etiqueta HTML `iframe`

Descubra los conceptos básicos para trabajar con HTMLiframeetiqueta

losiframeLa etiqueta 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 no interfiere con la página principal y viceversa. JavaScript y CSS no se "filtran" hacia / desde iframes.

Muchos sitios usan iframes para realizar varias cosas. Es posible que esté familiarizado con Codepen, Glitch u otros sitios que le permiten codificar en una parte de la página y verá el resultado en un cuadro. Eso es un iframe.

Creas uno de esta manera:

<iframe src="page.html"></iframe>

También puede 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 usando CSS); de lo contrario, el iframe usará los valores predeterminados, un cuadro de 300x150 píxeles:

<iframe src="page.html" width="800" height="400"></iframe>

Srcdoc

lossrcdocEl atributo le permite especificar HTML en línea para mostrar. Es una alternativa asrc, pero reciente y no compatible con Edge 18 y versiones anteriores, y en IE:

<iframe srcdoc="<p>My dog is a good dog</p>"></iframe>

Salvadera

lossandboxEl atributo nos permite limitar las operaciones permitidas en los iframes.

Si lo omitimos, todo está permitido:

<iframe src="page.html"></iframe>

Si lo configuramos en "", no se permite nada:

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

Podemos seleccionar qué permitir agregando opciones en elsandboxatributo. Puede permitir varios agregando un espacio entre ellos. Aquí hay una lista incompleta de las opciones que puede utilizar:

  • allow-forms: permitir enviar formularios
  • allow-modalspermitir abrir ventanas modales, incluida la llamadaalert()en JavaScript
  • allow-orientation-lockpermitir bloquear la orientación de la pantalla
  • allow-popupspermitir ventanas emergentes, usandowindow.open()ytarget="_blank"Enlaces
  • allow-same-origintratar el recurso que se está cargando como 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

Permitir

Actualmente experimental y solo compatible con navegadores basados en Chromium, este es el futuro del uso compartido de recursos entre la ventana principal y el iframe.

Es similar alsandboxatributo, pero nos permite permitir características específicas, que incluyen:

  • accelerometerda acceso a la interfaz del acelerómetro de la API de sensores
  • ambient-light-sensorda acceso a la interfaz de Sensors API AmbientLightSensor
  • autoplaypermite reproducir automáticamente archivos de video y audio
  • camerapermite acceder a la cámara desde elAPI getUserMedia
  • display-capturepermite acceder al contenido de la pantalla utilizando la API getDisplayMedia
  • fullscreenpermite acceder al modo de pantalla completa
  • geolocationpermite acceder alAPI de geolocalización
  • gyroscopeda acceso a la interfaz del giroscopio de la API de sensores
  • magnetometerda acceso a la interfaz del magnetómetro API Sensors
  • 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
  • usbda acceso a la API WebUSB.
  • vibrateda acceso a la API de vibración
  • vrda acceso a la API WebVR

Referente

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

The misspelling of referrer originated in the original proposal by computer scientist Phillip Hallam-Baker to incorporate the field into the HTTP specification. The misspelling was set in stone by the time of its incorporation into the Request for Comments standards document RFC 1945

losreferrerpolicyEl atributo nos permite configurar el referente para enviarlo al iframe al cargarlo. El referente es un encabezado HTTP que le permite a la página saber quién lo está cargando. Estos son los valores permitidos:

  • no-referrer-when-downgradees el predeterminado y envía la 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 la referencia, y solo contiene el origen (puerto, protocolo, dominio), no el origen + ruta que es la predeterminada
  • 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-originla referencia 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 a través de HTTPS y el iframe también se carga en el protocolo HTTPS. No envía nada si el iframe se carga a través de HTTP
  • strict-origin-when-cross-originenvía el origen + ruta como referente cuando se trabaja en el mismo origen. Envía el origen como referencia si la página actual se carga a través de HTTPS y el iframe también se carga en el protocolo HTTPS. No envía nada si el iframe se carga a través de 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

Descarga mi gratisManual HTML


Más tutoriales de HTML: