HTMLIFrames


Parámetros

Atributo Detalles
name Establece el nombre del elemento, que se utilizará con a etiqueta para cambiar el src de iframe.
width Establece el ancho del elemento en píxeles.
height Establece la altura del elemento en píxeles.
src Especifica la página que se mostrará en el marco.
srcdoc Especifica el contenido que se mostrará en el marco, suponiendo que el navegador lo admita. El contenido debe ser HTML válido.
sandbox Cuando se configura, el contenido del iframe se trata desde un origen único y se desactivarán las funciones que incluyen scripts, complementos, formularios y ventanas emergentes. Las restricciones se pueden relajar selectivamente agregando una lista de valores separados por espacios. Vea la tabla en Observaciones para los posibles valores.
allowfullscreen Ya sea para permitir que los contenidos del iframe utilicen requestFullscreen()

Observaciones

Un iframe se utiliza para incrustar otro documento en el documento HTML actual.

Puedes usar iframes para mostrar:

  • otras páginas HTML en el mismo dominio;
  • otras páginas HTML en otro dominio (ver más abajo - Política del mismo origen);
  • Documentos PDF (aunque IE podría tener algunos problemas, esta pregunta SO podría ayudar);

DEBE usar un iframe como último recurso, ya que tiene problemas con los marcadores y la navegación, y siempre hay mejores opciones aparte de un iframe. Esta pregunta de SO debería ayudarlo a comprender más sobre los altibajos de los iframes.


Política del mismo origen

Algunos sitios no pueden mostrarse usando un iframe, porque aplican una política llamada política de origen idéntico . Esto significa que el sitio en el que se encuentra el iframe debe estar en el mismo dominio que el que se muestra.

Esta política también se aplica a la manipulación de contenido que vive dentro de un iFrame. Si el iFrame accede al contenido de un dominio diferente, no podrá acceder o manipular el contenido dentro de un iFrame.

El elemento iframe en W3C


atributo de sandbox

El atributo sandbox , cuando se establece, agrega restricciones adicionales al iframe. Se puede usar una lista de fichas separadas por espacios para relajar estas restricciones.

Valor Detalles
allow-forms Permite la presentación de formularios.
allow-pointer-lock Habilita la API de puntero de JavaScript.
allow-popups Las ventanas emergentes se pueden crear usando window.open o <a target="_blank"
allow-same-origin El documento iframe utiliza su origen real en lugar de recibir uno único. Si se usa con allow-scripts el documento iframe puede eliminar todo el espacio aislado si es del mismo origen que el documento principal.
allow-scripts Habilita scripts. El documento iframe y el documento principal pueden comunicarse entre sí mediante la API postMessage() . Si se utiliza con allow-same-origin el documento iframe puede eliminar todo el espacio aislado si es del mismo origen que el documento principal.
allow-top-navigation Permite que el contenido del iframe cambie la ubicación del documento de nivel superior.

IFrames Ejemplos relacionados