Etiqueta <iframe> de HTML

  • Página anterior <i>
  • Página siguiente <img>

Definición y uso

<iframe> La etiqueta define el cuadro de imagen en línea (cuadro de imagen en línea).

El cuadro de imagen en línea se utiliza para insertar otro documento en el documento HTML actual.

Consejo:Por favor, utilice CSS para configurar <iframe> estilos (véase el siguiente ejemplo).

Consejo:Es mejor que siempre sea <iframe> Incluye la propiedad title. Los lectores de pantalla pueden usar este atributo para leer sobre <iframe> Descripción del contenido.

Por favor, consulte también:

Tutoriales de HTML:Iframe HTML

Manual de Referencia del DOM HTML:Objeto IFrame

Ejemplo

Ejemplo 1

La etiqueta de cuadro de imagen en línea es la siguiente:

<iframe src="https://www.codew3c.com" title="CodeW3C.com En línea tutorial"></iframe>

Pruebe usted mismo

Ejemplo 2

Añadir y eliminar el borde del iframe (usando CSS):

<iframe src="/index.asp" width="100%" height="300" style="border:1px solid black;">
</iframe>
<iframe src="/index.asp" width="100%" height="300" style="border:none;">
</iframe>

Pruebe usted mismo

Atributo

Atributo Valor Descripción
allow Define la estrategia de funcionalidad del <iframe>.
allowfullscreen
  • true
  • false
 Si el <iframe> puede activar el modo de pantalla completa mediante la llamada requestFullscreen(), configure como true.
allowpaymentrequest
  • true
  • false
 Si se permite que el <iframe> realice llamadas a Payment Request API a través de peticiones cruzadas, configure como true.
height Píxeles Define la altura del <iframe>. La altura predeterminada es de 150 píxeles.
loading
  • eager
  • lazy
 Define si el navegador debe cargar inmediatamente el iframe o retrasar la carga hasta que se cumplan ciertas condiciones.
name Texto Define el nombre del <iframe>.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 Define la información de referencia que se debe enviar al obtener el iframe.
sandbox
  • allow-forms
  • allow-pointer-lock
  • allow-popups
  • allow-same-origin
  • allow-scripts
  • allow-top-navigation
 Habilita una serie de limitaciones adicionales para el contenido del <iframe>.
src URL Define la dirección del documento que se debe incrustar en el <iframe>.
srcdoc Código HTML Define el contenido HTML de la página que se mostrará dentro del <iframe>.
width Píxeles Define el ancho del <iframe>. El ancho predeterminado es de 300 píxeles.

Atributo global

<iframe> La etiqueta también admite Atributos globales en HTML.

Atributos de eventos

<iframe> La etiqueta también admite Atributos de eventos en HTML.

Configuración CSS predeterminada

La mayoría de los navegadores mostrarán los siguientes valores predeterminados <iframe> Elemento:

iframe:focus {
  outline: none;
}
iframe[seamless] {
  display: block;
}

Compatibilidad con navegadores

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte
  • Página anterior <i>
  • Página siguiente <img>