HTML iframe

La etiqueta <iframe> en HTML se utiliza para insertar contenido de otra página web dentro de una página existente. Es similar a la etiqueta <embed>, pero tiene un mayor soporte en los navegadores y dispositivos. La etiqueta se utiliza dentro de una etiqueta <body> y requiere un atributo “src” que especifica la ubicación de la página web que se va a insertar.

También se pueden especificar atributos adicionales, como “width” y “height” para controlar el tamaño del contenido insertado y “scrolling” para especificar si se mostrarán barras de desplazamiento en caso de que el contenido sea demasiado grande para el tamaño del iframe.

Además, el contenido dentro del iframe es completamente independiente del contenido fuera del iframe, por lo que los estilos CSS y scripts JavaScript no se aplicarán al contenido dentro del iframe a menos que se especifique de forma explícita.

La guía definitiva de HTML5 y CSS3: (Spanish Edition)

Ver Ofertas en Amazon

El gran libro de HTML5, CSS3 y Javascript (Spanish Edition)

Ver Ofertas en Amazon

HTML5 para Mentes Maestras, 2da Edición (Spanish Edition)

Ver Ofertas en Amazon

Ejemplo de uso

Aquí te muestro un ejemplo de cómo utilizar la etiqueta <iframe> para insertar el contenido de otra página web en una página existente:

<!DOCTYPE html>
<html>
  <head>
    <title>Mi página web</title>
  </head>
  <body>
    <h1>Bienvenido a mi página web</h1>
    <iframe src="https://www.example.com" width="800" height="600"></iframe>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se está usando la etiqueta <iframe> para insertar el contenido de la página web “https://www.example.com” dentro de una página existente.

El atributo “width” y “height” establecen el tamaño del iframe en 800×600 píxeles.

Atributos

Los atributos más comunes de la etiqueta <iframe> en HTML son:

src: Este atributo especifica la ubicación de la página web que se va a insertar en la página actual. Es obligatorio especificar un valor para este atributo.

width y height: Estos atributos especifican el tamaño del contenido insertado en la página. Por defecto, el tamaño es el original de la página web insertada.

name: Este atributo especifica el nombre del iframe, el cual se puede utilizar para hacer referencia a él desde otro lugar en la página web.

sandbox: Este atributo proporciona una serie de restricciones para el contenido dentro del iframe, como no permitir ejecutar scripts, no permitir formularios, etc.

seamless: Este atributo define si el borde y el scrollbar del iframe deben ser ocultos o no.

scrolling: Este atributo define si se mostrarán barras de desplazamiento en caso de que el contenido sea demasiado grande para el tamaño del iframe. Los valores posibles son “yes”, “no”, “auto”.

srcdoc: Este atributo permite especificar el contenido HTML que se mostrará en el iframe, en lugar de cargarlo desde una URL.

frameborder: Este atributo define si se mostrará un borde alrededor del iframe.

allowfullscreen: define si el contenido del iframe se puede ver a pantalla completa

Ten en cuenta que estos son solo algunos de los atributos más comunes de la etiqueta <iframe>, hay otros atributos adicionales que se pueden utilizar dependiendo de tus necesidades.

Más ejemplos

Aquí te muestro algunos ejemplos de cómo utilizar los atributos de la etiqueta <iframe> en HTML:

Ejemplo de uso de src:

<iframe src="https://www.example.com"></iframe>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se está especificando la ubicación de la página web que se va a insertar en la página actual.

Ejemplo de uso de width y height:

<iframe src="https://www.example.com" width="800" height="600"></iframe>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se está especificando el tamaño del iframe en 800×600 píxeles.

Ejemplo de uso de name:

<iframe src="https://www.example.com" name="myiframe"></iframe>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se está especificando el nombre del iframe como “myiframe”.

Ejemplo de uso de sandbox:

<iframe src="https://www.example.com" sandbox="allow-forms"></iframe>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se está especificando que se permiten formularios dentro del iframe.

Ejemplo de uso de seamless:

<iframe src="https://www.example.com" seamless="seamless"></iframe>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se está especificando que el borde y el scrollbar del iframe deben ser ocultos.

Ejemplo de uso de scrolling:

<iframe src="https://www.example.com" scrolling="no"></iframe><span style="background-color: rgb(255, 255, 255); color: initial;"></span>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se está especificando que no se mostrarán barras de desplazamiento en caso de que el contenido sea demasiado grande para el tamaño del iframe.

Ejemplo de uso de srcdoc:

<iframe srcdoc='<p>Hello World!</p>'></iframe>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se está especificando el contenido HTML que se mostrará en el iframe, en lugar de cargarlo desde una URL.

Ejemplo de uso de frameborder:

<iframe src="https://www.example.com" frameborder="0"></iframe>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se está especificando que no se mostrará un borde alrededor del iframe.

Ten en cuenta que estos son solo algunos ejemplos de cómo utilizar los atributos de la etiqueta <iframe> en HTML, hay muchas otras formas de utilizar estos atributos dependiendo de tus necesidades.