<iframe>El elemento <iframe> en HTML5 se utiliza para incrustar otro documento HTML dentro del documento actual. Este elemento permite mostrar una página web diferente dentro de un marco de la página actual.
<iframe>src: Especifica la URL de la página web que se va a mostrar en el iframe.
<iframe src="https://www.example.com"></iframe>srcdoc: Especifica el contenido HTML que se debe mostrar en el iframe en lugar de una URL.
<iframe srcdoc="<p>Este es un contenido incrustado</p>"></iframe>name: Asigna un nombre al iframe, lo que permite hacer referencia al mismo desde enlaces o scripts.
<iframe name="myFrame" src="https://www.example.com"></iframe>width: Define el ancho del iframe. Puede expresarse en píxeles o en porcentaje.
<iframe src="https://www.example.com" width="600px"></iframe>height: Establece la altura del iframe. Al igual que el ancho, puede expresarse en píxeles o en porcentaje.
<iframe src="https://www.example.com" height="400px"></iframe>frameborder: Indica si se debe mostrar un borde alrededor del iframe. Sus valores posibles son 0 (sin borde) y 1 (con borde).
<iframe src="https://www.example.com" frameborder="0"></iframe>sandbox: Permite aplicar restricciones adicionales al contenido que se carga en el iframe. Puede tomar varios valores separados por espacios:
<iframe src="https://www.example.com" sandbox="allow-scripts allow-same-origin"></iframe>Algunos de los valores que puede tomar son:
allow-same-origin: Permite que el contenido tratado como si fuera de la misma origen (para acceso a cookies, etc.).allow-scripts: Permite la ejecución de scripts.allow-popups: Permite abrir ventanas emergentes.allow-forms: Permite enviar formularios.allow: Especifica una lista de características que debería permitir el iframe, como controles de video, pantalla completa, etc.
<iframe src="https://www.example.com" allow="fullscreen"></iframe>loading: Indica cómo se descargará el iframe. Valores posibles:
lazy: Defer loading of the iframe until it reaches a calculated distance from the viewport.eager: cargar el contenido lo antes posible.<iframe src="https://www.example.com" loading="lazy"></iframe>referrerpolicy: Define la política de referencia para las solicitudes. Por ejemplo, no-referrer, origin, etc.
<iframe src="https://www.example.com" referrerpolicy="no-referrer"></iframe>allowfullscreen: Permite que el iframe se muestre en pantalla completa, si el contenido incrustado así lo permite.
<iframe src="https://www.example.com" allowfullscreen></iframe><iframe> en HTML5A continuación, se presentan algunos ejemplos sencillos que muestran cómo utilizar el elemento <iframe> en diferentes contextos.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo Básico de Iframe</title>
</head>
<body>
<h1>Página Principal</h1>
<iframe src="https://www.example.com" width="600" height="400"></iframe>
</body>
</html>sandbox<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo con iFrame y Sandbox</title>
</head>
<body>
<h1>Página Principal</h1>
<iframe src="https://www.example.com" width="600" height="400" sandbox="allow-scripts"></iframe>
</body>
</html>srcdoc)<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo con srcdoc</title>
</head>
<body>
<h1>Página Principal</h1>
<iframe srcdoc="<h2>Contenido interno del iframe</h2><p>Este es un párrafo dentro del iframe.</p>" width="600" height="200"></iframe>
</body>
</html>allowfullscreen<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo con allowfullscreen</title>
</head>
<body>
<h1>Página Principal</h1>
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" allowfullscreen></iframe>
</body>
</html>Estos ejemplos muestran cómo el elemento <iframe> puede ser utilizado para incrustar contenido de otras fuentes en una página web de manera flexible y segura.