En este articulo os voy a explicar que son los iframes en HTML y como usarlos. Con los iframes podemos crear uno o varios espacios dentro de una pagina web para poner dentro de ellos otras paginas web, bien sean internas o externas. Los iframes son algo parecido a los frames, aunque esto últimos se usan muchísimo menos.
Hay que tener en cuenta que los iframes se pueden usar para poner paginas web dentro de ellos, o por lo menos intentarlo, ya que nos vamos a encontrar con que muchas webs no permiten eso, la gran mayoría lo tienen deshabilitado, ya que poniendo una web de otra persona dentro de un iframe en nuestra web podemos llevar a cabo acciones ilegales, aunque no hay que asustarse :D.
La sintaxis de declaración de iframes es muy sencilla y os la muestro:
<iframe src="paginainicial.html" name="mipagina" width="700" height="500" framedorber="1">Tu navegador no soporta iframes</iframe>
Vamos por partes, primero esta la etiqueta «iframe» de inicio, luego tenemos el atributo «src» con una pagina web nuestra que hemos creado previamente y que sera la que veamos dentro del iframe, luego tenemos el atributo «name» con la que le ponemos nombre para posteriormente poder usar el iframe para cargar otras paginas web. Luego tenemos los atributos «width» y «height» que indican el tamaño que tendrá con ancho y alto respectivamente. También tiene el atributo «frameborder» con valor «1» para que veamos el marco del iframe, es algo muy útil cuando diseñamos la pagina web para ver su posición, luego podemos quitarle el marco o borde poniéndole como valor «0». Luego tenemos un texto «Tu navegador no soporta iframes», que es un mensaje que aparecerá en el navegador del usuario que visite nuestra pagina en el caso de que su navegador web sea antiguo y no pueda mostrar iframes. Finalmente ponemos la etiqueta de cierre.
Supongamos que queremos que cuando un usuario visite una pagina web que hayamos hecho y haga click en un determinado enlace se cargue otra pagina en un iframe, para ello tenemos que añadirle el atributo «target» al enlace con el nombre del iframe como valor. Para que veáis como funciona os voy a poner un ejemplo, hay que crear tres paginas, la principal donde estará el iframe, otra que sera la que se cargue por defecto en el iframe y otra que se cargara en el iframe cuando hagamos click en el enlace de la pagina principal. La principal es «index.html» y el código HTML es el siguiente:
<html> <head></head> <body> <h1>Pagina principal</h1> <a href="otrapagina.html" target="nombre">Cargar otra pagina</a> <iframe name="nombre" src="pagina.html" width="400" height="400" frameborder="1">Tu navegador no soporta iframes</iframe> </body> </html>
La siguiente es «pagina.html» que estará en el iframe cargada cuando abramos la principal y su código es el siguiente:
<html> <head></head> <body> <h1>Pagina por defecto en el iframe</h1> </body> </html>
La ultima es la que se cargara al hacer click en el enlace de la principal y su código HTML es el siguiente:
<html> <head></head> <body> <h1>Pagina a cargar en el iframe</h1> </body> </html>
Si copiáis el código en tres archivos como lo he puesto y guardáis los tres documentos en el mismo directorio, al ejecutar el «index.html» veréis el resultado.
Aquí os dejo un vídeo en el cual explico esto paso a paso y podéis ver como funciona:
[youtube]https://www.youtube.com/watch?v=yTJ04LWHhlM[/youtube]
Si te ha gustado o te ha servido para algo el contenido de este articulo compártelo en las redes sociales para que pueda crecer, muchas gracias.
Sobre el autor
Liher
Me gusta Linux, probar distribuciones nuevas y aprender de ellas. Tambien me gusta el diseño web y sus infinitas posibilidades
Saludos, tengo un problema con el iframe.
El iframe muestra la página local, pero las acciones de los botones bentro de la pagina local no se ejecutan correctamente. Los botones deberian ejecutar un animatescroll hacia el siguiente etexto que está abajo, pero no lo hace. ¿Qué estoy haciendo mal? la página sola vista en el navegador funciona correctamente, pero falla al ser cargada dentro del iframe.
S.O.S..!
Hola Albert, mandame el codigo a la direccion de contacto y lo miro, pero creo que puede tener que ver con que no hayas cargado la libreria Jquery en la pagina que muestras dentro del iframe, aunque sin ver la web no podria confirmarlo. Saludos
La página sola funciona correctamente, pero cuando es llamada dentro del iframe las acciones de los botones dejan de funcionar.
Este es el link de la pagina sola con las acciones: http://orquestalatinsoul.com/v2/Zonas/Integrantes/Marieliz.html#
Este es el link de la pagina dentro del iframe: http://orquestalatinsoul.com/v2/Zonas/Main.html
Hola Alberto, creo que puede ser por el posicionamiento. Yo probaria a hacer algunos cambios en ese aspecto. Ya me contaras. Un saludo amigo.
Me he descargado todo el curso en PDF y ahora a currarmelo.
Por cierto, excelente la opción de descargar en PDF los artículos. Tengo una extensión en el navegador para hacerlo, pero de esta forma es más rápido y queda más «limpio».
Buen trabajo, paisano.
Hola Petrus, genial, luego pasame la lista de errores 😀 ok? Un saludo amigo
Una duda de última hora: para empezar a trastear, no es mejor un editor de texto sencillo (Kate por ejemplo) que Geany o Bluefish?
Amigos me gustaria que me ayuden con un iframe, quiero tener un iframe que cargue mi pagina pero que cuando entre a mi pagina no cargue inmediatamente que cargue a los 5 o 10 segundos, como lo puedo hacer?
Hola Wilmer, para hacer eso tendrias que usar Javascript o Jquery. Muchas gracias por tu visita un saludo amigo
Me puedes ayudar en eso amigo?
Hola Wilmer, no soy un experto en Javascript, quizas deberias buscar en Google, siento no poder ayudarte
ok muchas gracias hermano, dame tu facebook para poder contactarte, quiero proponerte algo.
Hola amigo, no se si la pregunta viene al caso, peor como podria poner un iframe y a la par una imagen u otro espacio,
Saludos
Hola Rodney, te refieres a poner una imagen dentro de un iframe?
Hola no se si sea lo mismo que pasa conmigo, mira estoy en un juego donde puedes diseñar tu propia hmm como decirlo tu layout, el cual es una plantilla hasta ahi todo esta bien, pero yo quiero configurar mi layout con botones que al pasar el curso cambien de color el boton o tengan una transición o bien que tengan algun tipo de movimiento,, todo esto dentro de la misma pagina y que al presionar el boton cambie el contenido de la caja principal, no se si podrías ayudarme explicandome eso, porque estoy hecha un lio, tengo algunos codigos pero simplemente no se donde colocarlo o como hacerlo, porque mi layout esta hecho con coordenadas y medidas sujetos a una imagen… (no sé si me estoy explicando bien) espero y me ayudes explicandome
Hola ILiw, podemos hablar por email en liher@mail.com?
Saludos, y qué código habría que incorporar si quiero cambiar el iframe todos los meses pero quiero que se haga automáticamente. Digamos que es un iframe dinámico. Te pongo un ejemplo, quiero que en el iframe se visone una pagina que contine una newsletter que cambia todos los meses. La ruta sería http://www.dominio.com/newsletter/2016-01-01/index.html. Lo que va cambiando todos los meses es la carpeta con la fecha (año-mes-día). Gracias
Hola Jose, no lo se, nunca me plantee hacer eso, siento no serte de ayuda, un saludo amigo
Amigo, que gran aporte. Me ha servido de mucha utilidad, pero como nada es perfecto tengo un problema. Resulta que cuando quier actualizar mi iframe con una u otra página según el caso, refresca la pagina principal y lo que quisiera es que se actualice el iframe sin volver a cargar o refrescar la pagina que hace el llamado a la pagina que va dentro del iframe… Gracias por la ayuda que puedas ofrecerme al respecto… Saludos.
Hola Jaime, aqui tienes la solucion:
http://www.desarrolloweb.com/articulos/recargar-redirigir-html-meta.html
Solo tienes que aplicar el codigo del head en la web que esta en iframe. Espero te sirva de ayuda. Muchas gracias por tu visita, un saludo amigo
Hola!!
Excelente articulo!
Le explico brevemente mi caso, tengo una pagina (index.html) con 5 frames: encabezado,borde derecho, borde izaquierdo, pie de pagina y contenido.
Para contenido tengo, home, quienes somos, novedades, contactos, servicios.
Si ingreso con el url de index, funciona todo perfecto. El detalle es que desde el navegador llamo a cualquier contenido y me muestra nada mas contenido. Mi pregunta si existe alguna forma que desde el navegador llamen por ejemplo a contactos, me muestre todos los frames y la informacion de contacto.
Agradecido por el apoyo que puedan aportar.
Saludos,
Alejandro
Hola Alejandro, quieres decir que los frames por separado funcionan pero al pinchar en uno dentro del index, solo muestra el contenido del iframe sin lo demas?
Hola Liher, gracias por tu respuesta, no exactamente, cuando abro desde index, todos los iframes funcionan perfecto. El problema que tengo cuando colocas en el url directo por ejemplo: novedades.html, me muestra la pagina de novedades sin frame. Necesito qu esi existe algun script que cuando coloquen novedades,html, abra primero index y luego llame a novedades dentro de su target. Existe algun script?? Gracias por tu apoyo
Hola Alejandro, mira esta web, en ella hablan de lo que tu dices, es algo sencillo:
http://www.forosdelweb.com/f13/funcion-para-abrir-enlace-iframe-370415/
Ahi tienes la respuesta, no te la escribo aqui por no repetir todo, ok? Espero te sirva de ayuda. Un saludo
Buenas
Una pregunta, ¿se puede colocar texto alrededor de un iframe? Estoy haciendo un blog con WordPress (http://destinosasequibles.com) y he leído alguna cosa como por ejemplo hacerlo flotante (style=»float: left;») pero no me funciona 🙁
Alguna idea?
Gracias!
Hola Judith, como quieres colocar el texto?
Hola Liher,
Me gustaría que el texto quedara a la derecha. Lo he conseguido poniendo una imagen y el iframe, poniendo en ambos casos el estilo float (igual mi lenguaje no es el más correcto ya que de programación no tengo ni idea) sí que se ponen uno al lado del otro.
Con la imagen si que puedo poner texto al lado (wordpress lo hace casi solo) pero con el iframe nada…
Ya está 🙂
Qué hacer cuando algo casi no sale pero piensas que está bien… borrarlo «todo» y volver a escribirlo, quizás algún espacio? ni idea… el caso es que ya me ha funcionado
No sé si es lo más correcto:
También me he dado cuenta de que wordpress me cambia lo que es escribo, si le doy a copiar y pegar el enlace que me dice google (lo de arriba salvo por el style) me quita lo de iframe, igual no le motiva mucho… pero bueno igual que eso, tampoco me deja añadir archivos .kml o .gpx 🙁
Hola Judith, con los KML y los GPX me pasaba lo mismo, pero encontre la solucion, mandame un email y hablamos, ok?
Hola Judith, si quieres puedes contactarme por el mail y hablamos, ok?
Hola que tal tengo una gran duda, me gustaria que en mi pagina se vea en el iframe otra cualquier pagina y que al compartir ese link se vea mi pagina y con la otra pagina en el iframe (osea que no cargue el link de la otra pagina )
Hola Christian, en un principio eso deberia ser asi, cual es tu duda?
excelente aporte
Hola Eduardo, muchas gracias por tu visita, un saludo amigo
hola tengo un unapagina insertada en otra atraves de un iframe pero com opuedo hacer para compartir un link de algo que esta en la pagina del iframe y que cuando se abra sea la pagina mia y no la del iframe
gracias por tu ayuda
Hola Alejandro, no entiendo muy bien lo que quieres hacer, me puedes mandar un mail y hablamos?
Tengo el mismo problema que Alejandro.
gracias amigo ha sido de gran ayuda !!!!!
Hola Danel, muchas gracias a ti por tu visita, un saludo amigo
Buenas que tal? tengo un gran problema con los iframes, pasa que tengo mi pagina principal y hay otra mas pequeña que quiero cargar tambien pero este dentro de un iframe (seria como un HTML dentro de otro HTML) carga y funciona super bien pero el html que esta dentro del iframe no es responsive pero si esa misma pagina cargara por separado si que es responsive, espero que me puedas ayudar
Hola Arsenio, mirate este articulo :
https://cybmeta.com/como-hacer-un-iframe-responsive
Si te funciona me dices, ok? Muchas gracias por tu visita, un saludo amigo
Hola disculpa tengo una consulta. Estoy haciendo la pagina de mi empresa a través de un template de html5up, mi empresa se dedica a remodelación, tengo una sección que se llama proyectos.
En el template original esa sección es un mosaico de fotos que al dar click a cada una abre dicha foto en un primer plano a tamaño mas grande y fondo semitransparente.
Ahora en mis cambios hice que cada uno de los recuadros de ese mosaico sea un proyecto en el que hemos trabajado, si en el href de cada recuadro le pongo la fuente de una imagen «X» al dar el click si me abre la foto, pero lo que yo deseo es que al dar click me abra una galería de fotos de dicho proyecto..
Lo intente con una app en la web que hace galería carrusel de imágenes, te arroja un código y se inserta en el código html. el tema es que cuando lo inserto, hace que en lugar del nombre del proyecto que ya se veía, aparece la galería y como esta dentro del box establecido dcha galería se ve cortada, independientemente que no es lo que estoy buscando.
Después al ver esto hice que el código de la galería de fotos estuviera en un nuevo html y en el href del cuadro del proyecto lo estoy mandando llamar.
entonces ahora si al dar click en el proyecto me abre una pagina con la galería, el problema aquí es que justo abre el otro html y cuando quiero regresar a la pagina principal tengo que darle en «back» del navegador y entonces carga la pagina principal de nuevo, lo que seria molesto pues por el momento son 10 proyectos y cada uno con su galería de imágenes.
Habra forma de hacer esto??
Espero haberme explicado! gracias.
Hola Pepe, siempre hay una forma amigo 😀 pero a veces cuesta llegar a lo que queremos. ¿Te has planteado meterlo en un iframe?