La forma más fácil de insertar un iFrames

photographer-80122_1280
15 cosas que nunca debes decirle a un fotógrafo
24 noviembre, 2015
18ixdorz2ibjgjpg
Arrastrar y soltar en HTML5
21 marzo, 2017
Show all

La forma más fácil de insertar un iFrames

Codigo html

Un Iframe (por inline frame o marco incorporado en inglés) es un elemento HTML que permite insertar o incrustar un documento HTML dentro de un documento HTML principal. Fue introducido en el navegador Microsoft Internet Explorer en 1997 y durante mucho tiempo solo fue soportado en este navegador, la etiqueta Iframe actualmente es ya aceptada por la W3 como un elemento estándar y es ampliamente soportado por gran variedad de navegadores.

Los iFrames admiten diversos atributos como “AllowTransparency”, que deberemos establecer a “true”, que permite una visualización de la página mucho más atractiva; ya que, el fondo del iframe va a ser transparente, dejando ver el fondo original del archivo HTML principal. Para lo cual, habrá que poner el parámetro background:transparent, en la definición CSS de body, en la página a cargar en el <iframe src=’paginaACargar.html’>.

Ahora mostramos un ejémplo práctico en código html.

<html>
<head></head>
<body>
<center>
<h1>Ejemplos Tour Virtual 360º</h1>
<a href=”http://prueba360.laparideradeideas.es/” target=”nombre”>Cargar otro Tour Virtual 360º</a>
<br>
<br>
<iframe name=”nombre” src=”http://piso.laparideradeideas.es/” width=”900″ height=”600″ frameborder=”3″>Tu navegador no soporta iframes</iframe>
</center>

</body>
</html>

En este ejemplo se incrusta un iframe cuyo contenido esta en la URL “http://prueba360.laparideradeideas.es/“. Se especifica el ancho de 900 píxeles (width=”900″) y un alto de 600 píxeles (height=”600″). Si el contenido es más grande que el marco de la ventana, con “scrolling=auto” se activa la barra de desplazamiento para moverse dentro del iframe. La propiedad “frameborder” establece si el marco que contiene al iframe tiene borde o no. También se le denomina un nombre a la ventana con la propiedad “name” (name=”SubHtml”) con el que es posible hacer referencia al iframe para poder cambiar su dirección desde el html maestro.

Los documentos HTML también pueden incrustarse en otro documento a través del elemento object. Para más información sobre ello visita esta página (en inglés).

Por otro lado, el uso de iframes sirvió como inspiración de lo que hoy conocemos como AJAX, ya que cada parte de un documento html es independiente.

 

Para poder hacer el iFrame responsive y fluido es añadiendo un elemento padre que ocupa el 100% del espacio. Utilizaremos el ejemplo anterior:

HTML

<html>
<head></head>
<body>
<center>
<h1>Ejemplos Tour Virtual 360º</h1>
<a href=”http://prueba360.laparideradeideas.es/” target=”nombre”>Cargar otro Tour Virtual 360º</a>
<br>
<br>
<iframe name=”nombre” src=”http://piso.laparideradeideas.es/” width=”900″ height=”600″ frameborder=”3″>Tu navegador no soporta iframes</iframe>
</center>

</body>
</html>

CSS

El primer paso es dar formato al elemento padre con la clase url:

 1    .url {
2       position: relative;
3       padding-bottom: 56.25%;
4       overflow: hidden;
5    }El siguiente paso es dar formato al iframe para que ocupe el 100% del espacio del elemento padre con la clase url:1    .url iframe
2     {
3        position: absolute;
4        display: block;
5        top: 0;
6        left: 0;
7        width: 100%;
8        height: 100%;
9    }
Con esto ya tenemos un iframe responsive.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>