Un IFRAME es un recuadro dentro de una página web, en la cual se puede mostrar el contenioo de cualquier dirección web con cualquier contenido. De manera más exacta, se trata de incrustar un documento HTML dentro de otro documento HTML.
De esta manera y por ejemplo, podreis poner en vuestro blog el contenido de otra web, como si de una ventana abierta se tratara. Incluso se puede navegar por ella pinchando en los distintos enlaces. La utilidad ya se la dareis vosotros.
El código del iframe es el siguiente:
De esta manera y por ejemplo, podreis poner en vuestro blog el contenido de otra web, como si de una ventana abierta se tratara. Incluso se puede navegar por ella pinchando en los distintos enlaces. La utilidad ya se la dareis vosotros.
El código del iframe es el siguiente:
<div align="center"><iframe src="http://sinentradas.blogspot.com" width=450 height=250 frameborder=1 scrolling=auto></iframe></div>
Además de que la dirección que se pone de ejemplo, hay que sustituirla por aquella que queramos incrustar, el comando tiene todos estos atributos:
* src="URLamostrar"
El atributo principal y el lugar donde se teclea la dirección del elemento HTML a mostrar dentro del marco.
* scrolling=yes/auto/no
Con estas opciones se muestran o se ocultan las barras de desplazamiento.
* frameborder=0/1
El valor "1" indica al navegador que dibuje un borde para este frame, mientras que el valor "0" que no lo haga.
* marginwidth=valorenpixels
La distancia entre márgenes laterales y el contenido.
* marginheight=valorenpixels
La distancia entre márgenes inferior-superior y el contenido.
* width=valorenpixels
Asigna un ancho al iframe.
* height=valorenpixels
Asigna una altura al elemento.
* class="nombredelaclase"
Sirve para dar determinado aspecto al contenido del iframe, tal y como se explicó en la entrada Clases en CSS.
* style="..."
Define un estilo visual para el elemento usando instrucciones CSS. Cada instrucción va separada de la siguiente por un punto y coma (;). Es mejor práctica definir clases en la hoja de estilos y usar la anterior instrucción.
* title="titulo"
Le asigna un título al elemento, que será mostrado al pasar el puntero por encima.
* src="URLamostrar"
El atributo principal y el lugar donde se teclea la dirección del elemento HTML a mostrar dentro del marco.
* scrolling=yes/auto/no
Con estas opciones se muestran o se ocultan las barras de desplazamiento.
* frameborder=0/1
El valor "1" indica al navegador que dibuje un borde para este frame, mientras que el valor "0" que no lo haga.
* marginwidth=valorenpixels
La distancia entre márgenes laterales y el contenido.
* marginheight=valorenpixels
La distancia entre márgenes inferior-superior y el contenido.
* width=valorenpixels
Asigna un ancho al iframe.
* height=valorenpixels
Asigna una altura al elemento.
* class="nombredelaclase"
Sirve para dar determinado aspecto al contenido del iframe, tal y como se explicó en la entrada Clases en CSS.
* style="..."
Define un estilo visual para el elemento usando instrucciones CSS. Cada instrucción va separada de la siguiente por un punto y coma (;). Es mejor práctica definir clases en la hoja de estilos y usar la anterior instrucción.
* title="titulo"
Le asigna un título al elemento, que será mostrado al pasar el puntero por encima.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo ?
Gracias por seguir haciendo esto, tus posts me son de mucha utilidad! Echame un ojo y una firmita!
ResponderEliminarHola, eso es precisamente lo q quiero, pero cuando es direccionada a un correo en el momento de leer los correos se amplia y aparece en toda la pagina. Como podria arreglarlo?
ResponderEliminarpor ejemplo hotmail. en el momento de leer el correo se amplia y ya no aparece en el frame sino en toda la page.
Muchas gracias por tu pronta respuesta.
No puedo darte una solución.
ResponderEliminarEfectivamente, cuando pinchas en algún enlace del correo, te lleva a una nueva página transfiriendo datos y gmail (o el que sea) toma el control.
Supongo que será cosa de las cookies, contraseñas o las variables.
Lo siento...
Como no pude darte una respuesta adecuada, he consultado con JMiur de Vagabundia que es un "monstruo" en esto del HTML y aunque comenta que no es posible hacer lo que quieres, sí que ofrece una alternativa para el caso de GMAIL.
ResponderEliminarEspero que esto sí te sirva...
"Es una pregunta complicada, aunque tengo muchas dudas sobre el tema, trataré de responderla y dar una solución.
Cuando usas un IFRAME, lo que haces es cargar esa otra página simultáneamente con la tuya así que ambas funcionan pero de manera independiente. La página que está en el IFRAME no puedes controlarla ni modificarla, es lo que es y ejecuta los códigos que tenga, sean los que sean. En el caso de GMail, lo que ejecuta es un script que hace exactamente eso, se coloca como la página TOP y tapa a la otra.
Así que, es imposible hacerlo de ese modo. La mayoría de los correos hacen lo mismo y también muchos otros sitios; fundamentalmente, por razones de seguridad.
Ahora bien, Gmail tiene un tipo de página menos sofistica que la normal que está pensada para usar con teléfonos celulares. Desde esa página, pueden leerse los correos, escribir, etc.
Esa página SI puede colocarse en un IFRAME, sólo hace falta poner la dirección URL correcta que es distinta a la dirección que usamos normalmente:
http://m.gmail.com
Realmente, no es recomendable hacerlo y mucho menos usarlo, es peligroso, tu contraseña es colocada en un sitio externo a GMail y nadie puede garantizar si no es leída o guardada por el administrador de ese sitio. Digamos que tampoco le encuentro mucha utilidad al tema pero, esa es otra historia :D
Espero que la explicación sirva.
Saludos:
--
JMiur"
Muchas Gracias muchachos por sus explicaciones, tambien estuve buscando este fin de semana como hacerlo sin tener ninguna respuesta positiva, definitivamente lo dejo como algo imposible de realizar despues de tu explicacion.
ResponderEliminarGracias por todo.
Hola brother pero donde coloco ese codigo ps. eso te falto
ResponderEliminardebes poner como hacerlo ps amigo no de avancepones el codigo y uno que es aprendiz no sabe ni donde colocarlo.
¿ahh y esa ventana puede aparecer al sola al entrar al blog?
te agradeceria mucho si me ayudas..
Eskan, normalmente, los códigos hay que ponerlos en la parte de la plantilla que se indican en cada truco.
ResponderEliminarSi no se dice nada, como en este caso, lo tienes que poner dónde quieres que aparezca el artilugio:
si es en la barra lateral, añadiendo un elemento HTML; si es en una entrada, copiándolo directamente en el texto que redactas para tus post... etc.
...y se me olvidaba. Una vez que copies el código, siempre aparecerá cada vez que abras la página correspondiente a la entrada. Si quieres que sea fijo en todas tus páginas, lo tendrás que poner en la barra lateral o en la cabecera o pie de post.
ResponderEliminarSi quieres ponerlo justo delante de todas las entradas y después de la cabecera, echa un vistazo al enlace.
Mi niño, ¡tú si qué sabes!
ResponderEliminar¡Olé, olé y olé!
Haberte descubierto por mi querida y admirada Eulalia, ha sido todo un placer.
Se te da muy bien esto del "explicoteo". Ya sé que en este blog se habla bien, pero una palabra simpática no molesta a nadie, ¿o sí?.
¡Sigue así, ayudando de esta forma tan cercana y haciéndo que todo parezca fácil!
¡Sé feliz, mi cómplice!
Besitos,
Vesta, desde mi corazón.
crear una ventana para ver un página web.
ResponderEliminarla barra lateral no se quita, le pongo NO* scrolling=yes/auto/no
Con estas opciones se muestran o se ocultan las barras de desplazamiento.
pero no se va.Dime algo si eres tan amable
http://fotografo1953.blogspot.com/search/label/SLIDESHOW
Hola Fotografo. Poniendo SCROLLING=NO, te debería de funcionar sin barras de desplazamientos. Lo acabo de cambiar en el post para que lo veas. Antes estaba el AUTO. Un saludo.
ResponderEliminarHola Oloman:
ResponderEliminarEn 23 días se cumple un año de la creación de mi blog.
Voy a cambiarle el diseño, de la clásica plantilla MINIMA a la moderna Zinmag Remedy (que descargué de btemplates.com)
Le hice varias modificaciones ya, me quedan sólo dos detalles. Uno es terminar de armar el menú, el otro es lograr ocultar "el título y la descripción", ya que en la Zinmag, tuve que insertar el banner en la plantilla. En la MINIMA lo agregaba como elemento de página, y le daba a "en lugar del título y la descripción". De ser posible... ¿Podrás indicarme como hacer para ocultar esos datos, sin que desaparescan de la barra de títulos?
Te dejo el link de mi blog de pruebas, donde estoy configurando la plantilla, http://laratadelaboratorio.blogspot.com
Si tenés alguna sugerencia en cuanto a la plantilla o diseño, será bienvenida.
Un Saludo.
Pd: felicitaciones por el concurso, vas a la cabeza!
RUF:
ResponderEliminartengo mi pagina web, cuando se presiona un ícono, se abre una ventana NUEVA, desapareciendo mi PAGINA principal.
Como modifico la instrucción HTML, para que al presionar un ícono, se abra una NUEVA VENTANA, y mi pagina PERMANEZCA..
gracias por su ayuda
Hola. Para eso tienes que incluir en el código del enlace un TARGET="_BLANK".
ResponderEliminarEspero que alguien me ayude con este tema. Es muy claro esta info para colocar un iframe. Pero como le hago para que en vez de aparecer toda la pagina, solo lo haga en una seccion? P.E. En una pagina lo que quiero que aparezca es un parrafo o tabla que se encuentra del lado izquierdo hasta abajo. Espero me haya entendido.
ResponderEliminarSaludos
Si la parte que quieres que se vea es un DIV, una tabla (TABLE) o algo que se pueda identificar con un ID, ese marcador se puede incorporar a la dirección para que la ventana se cuadre allí:
ResponderEliminarhttp://paginaweb.html#NOMBREID
Comprendo, pero si no tiene ninguna forma de identificación, entonces es imposible ponerla?. Ya que no tiene nada y esta hecha solo sobre una tabla.
ResponderEliminarGracias y Saludos
Así es. Sólo tendría solución si la página a mostrar dentro del iframe fuera tuya. En ese caso sería suficiente con ponerle algo.
ResponderEliminaroloman mil gracias! me ha gustado mucho. Un saludo
ResponderEliminarHacer esto es legal? Por ejemplo, si quieres recopilar varias páginas web en tu sitio.
ResponderEliminarPor cierto, gracias por la info
ResponderEliminarhttp://RocksNRules.tk
No lo sé RocksNRules, pero sería similar a poner una captura de pantalla de otro sitio, por lo que en un principio, no veo mayor problema. Además, las visitas le cuentan igual a la otra página y todo lo que hagas dentro del iframe es cómo si estuvieras directamente en esa página.
ResponderEliminarSupongo que depende del uso que le des. Si abres un iframe a pantalla completa, estás como duplicando el sitio y eso como mínimo está más bien feo, pero si lo usas como muestra, imagino que no.
Y si el otro sitio es también tuyo evidentemente tampoco hay problema :D
mi pregunta seria si es legal poner una web en la tuya , saludos
ResponderEliminarSebastián, como le dije a RocksNRules, cuando ambas webs son tuyas, no hay seguro ningún problema y si te refieres a mostrar las de otros, entonces te respondo que no tengo ni idea, aunque supongo que dependerá del uso que le des.
ResponderEliminarHacia tiempo que quería hacerlo, gracias por la info, buenisimo el blog ;), visitad nuestra web, www.leycosmica.org
ResponderEliminarespectacularr me sirvo de mucho gracias!!
ResponderEliminarY si quisiera solo mostrar sierta parte de la pagina como deveria hacer???
ResponderEliminarSaludos!!
Si el control de la otra página no es también tuyo, de ninguna manera Bilosony2.
ResponderEliminargracias me fue de mucha ayuda mil gracias.....
ResponderEliminarBuenas tardes, primero que todo agradecerte tu tiempo por redactar estos post, son de gran utilidad para compañeros que se inician en este mundo, yo personalmente utilice bastante esta técnica en el diseño de algunas páginas web, solo que con el tiempo el requerimiento de frames para nuevos proyectos no me ha sido necesario, hay casos excepcioanles aún cuando te piden lo típico de "reproducir música" en una página web sin que esta se interrumpa al navegar en otras secciones de misma página web, aquí lo ideal es crear un frame, 1 para tu web y otro para el reproductor de música. Un saludo a todos.
ResponderEliminarEs una buena idea Paginas Web Algeciras. A mí sólo se me ocurrió abrir una ventana en segundo plano con la música para solucionar eso. Tomo nota. Gracias.
ResponderEliminaren mi blog tengo un apartado de enlaces y quisiera saber si se puede hacer que cada una de las direcciones se habran en el mismo iframe
ResponderEliminar¿Varias direcciones en un mismo frame? Yo creo que no Entre Matas. Pero lo que si puedes hacer son ventanas modales para cada uno de los enlaces o si quieres usar iframe, tantos como enlaces tengas, haciéndolos visibles sólo cuando se pinche en el enlace. De todas formas, la primera solución me parece la mejor.
ResponderEliminarmuy bueno lo nesesitaba gracias, sigue asi
ResponderEliminarhola tengo una pregunta puse el codigo y el url pero cuando abro mi blog con la pagina que quiero visualizar esta se me redirecciona a la pagina que voi a visualizar espero me ayudes gracias
ResponderEliminarDj Dammsi la página que quieres mostrar no es tuya, la cosa no tiene arreglo. Ver esta entrada.
ResponderEliminarYo tengo el mismo problema
ResponderEliminarPero pense si es posible poner un aviso
Cuando va abrirse nueva pagina
Con 2 opcines a elegir:
Seguir con abrir nueva pagina o
No abrir nueva pagina y cancelar operacion
Aikon, si el contenido que muestras en el iframe no está controlado por tí, no puedes hacer nada para solventar el problema.
ResponderEliminarhola oloman, lo que quiero hacer en mi pagina es que digamos un usuario busque una definicion y este sea dirigido a una pagina por digamos wikipedia con la "definicion" alli utilizaria este iframe y no saldrian de mi pagina verdad? esa es la idea.... aunque un poco dificil o que me recomiendas
ResponderEliminarNo, Daltonico, no saldrían de tu página... del todo. Lo que veo difícil es ligar el resultado de una búsqueda a una página concreta y más aún, que esa página se cargue en el iframe. A mí al menos no se me ocurre cómo hacerlo.
ResponderEliminargracias por tan interesante aporte te lo agradezco de todo corazon eres un sabio
ResponderEliminartengo problemas con el código que publicaste, podrías por favor indicarme como pondria el codigo si lo que quiero es que la page del YOUTUBE (mi canal)esté dentro de mi blog. es que lo intenté y nada. gracias. SALUDAZOS OLOMAN, muy buen trabajo.
ResponderEliminarBallet de niños y jóvenes lo único que tienes que averiguar es la dirección (URL) de tu canal en YouTube para sustituirla por la que se ofrece en el ejemplo (http://sinentradas.blogspot.com).
ResponderEliminarPero como es grande, si quieres que quede bien tendrás también que modificar el WIDTH y el HEIGHT.
Muchísimas gracias, andaba buscando justo esto.
ResponderEliminarHola, tengo un problema, al realizar un iframe de algunas paginas me redirecciona a la pagina de la cual estoy haciendo el iframe, ¿hay alguna solucion para esto?
ResponderEliminarMuchas gracias y un saludo.
Lo que quiero es lograr hacer una pagina web en la que solo se visualicen otras 4 paginas web dentro de esta,y mi duda es como ubicar estas paginas,y la otra duda es que para acceder a cada una de estas paginas debo de inserir un user y una password diferentes en cada una de las paginas...es posible hacerlo,usando este codigo iframe...????
ResponderEliminarNo Buker, no hay forma de arreglarlo. El administrador de la página original es el que tiene el control total de la misma. De hecho aquí explicamos en su momento, una forma de que no te hicieran iframe: Evitar el frame de Google Imágenes y de otros
ResponderEliminarYunieskylo de situar cómo quieras los cuatro iframes no sería problema. Por ejemplo, usando una tabla ya lo podrías lograr.
Sin embargo, necesitas que esas páginas se activen con una contraseña, eso no lo vas a poder hacer de forma automática. Para que te hagas una mejor idea, un iframe es una ventana desde la que ves el exterior. Puedes sacar la mano y tocar todo lo que hay detrás de esa ventana sin problemas, pero no puedes cambiar lo que hay ahí porque es del vecino.
mil gracias por esto!!
ResponderEliminarDe nada LichiCuervo
ResponderEliminarCOMO PUEDO HACER PARA VISUALIZAR EN EL IFRAME SOLO UNA PARTE DE LA WEB, POR EJMPLO EL CENTRO, SIN QUE ME MUESTRE EL ENCABEZADO, SE PUEEDE?
ResponderEliminarHola JamesRod. No, no se puede centrar lo que hay dentro de un iframe. Si la página que se ve dentro está bajo tu control, entonces lo que tienes que hacer es centrarla, pero en origen, en el código de esa página externa. Sin embargo, si e es de otro no podrás hacer nada.
ResponderEliminarComo mucho podrías mostrarla a partir de un punto determinado, si esa página tuviera algún ancla (#), poniendo en el SRC algo así:
http://pagina_a_mostrar.com#container
Oloman, como hago si quiero que se cargue en otra pestaña otra web. Me explico: si cargo el dominio de mi blog (pagina de inicio)necesito que se cargue al mismo tiempo mi blog y paralelamente en segundo plano en otra pestaña otra web mas. Supongo que esto se hace con javascript, como puedo lograr esto?
ResponderEliminarAquí lo explican: Foros del Web
EliminarHola, lo que quiero hacer es lo siguiente: poner en la barra lateral una imagen personalizada del pajaro de twitter para que al clickar encima me sigan en twitter directamente o en su defecto que se abra mi twitter page. Y si hay otra forma de hacerlo que no sea Iframe...con facebook no tuve problema pporque el código de la like bok me lo gereró aut., copié y pegué en un widget de texto que puse en la barra. En Twitter ya se que tb se puede hacer pero quiero personalizarlo. Que hago por favor Oloman??
ResponderEliminarOk. Creo haberte entendido y se hace igual en una plataforma que en otra. En unos días publico cómo poner un enlace simple a Twitter. Eso te permitirá poner la imagen que quieras.
EliminarPor cierto se me olvidó decir que no es en bloguer, es en wordpress, perdón, gracias.
ResponderEliminarhola, gracias por tu post, ha sido clarificante, aunque no he podido hacer lo que deseo, tengo una lista de vivienda para que sea consultada por cualquiera, mi deseo es que como la lista es algo larga no ocupe todo el largo de la misma, sino pueda ser vista como una ventana donde el usuario pueda desplazarse en ella o si desea continuar viendo la pagina; la pagina es www.arqcolivas.blogspot.com gracias de antemano sea posible o no
ResponderEliminarCreo que la mejor solución es que uses una hoja de cálculo de Google Docs. Ahí grabas toda tu lista y luego la muestras en tu blog con el código para embeber que te facilitan.
EliminarHola buenas, tengo dos webs, que las controlo yo. Y me gustaria crear un iframe de una parte. Hos explico que quiero hacer. Tengo una web principal (1) y una web secundaria (2), dentro del web principal(1) en una pagina(1) tengo parte de un texto que me gustaria importar en otra pagina(2) de la web secundaria(2). Como lo puedo hacer con un iframe??. He provado pero me pone toda la pagina i yo solo quiero una parte del texto de una pagina de la web principal (1). Las dos webs son mias, tengo acceso al codigo. Se que me direis que lo copie i pegue, pero este texto se va actualizando muy amenudo. Si hago un enlace me muestra todo la pagina y yo solo quiero una parte.
ResponderEliminarGracias
No, no te iba a decir eso. Me suena que se puede hacer con JavaScript si tú tienes el control de ambas web, pero se me ha ocurrido que quizás te puede funcionar otra cosa más fácil.
EliminarSe trataría de crear una tercera página con ese contenido que quieres mostrar en dos sitios distintos. Luego en la web 1 y la web 2, mediante un iframe lo colocas sin problemas.
Esa tercera página la puedes hacer con un body del tamaño que quieres y así se mostrará justo lo que quieres en las otras dos ¿se entendió la idea? ¿es viable?
Hola muchas gracias, habia pensado en ello, pero no se si, es muy viable, ya que en la pagina principal allí quiero todo el texto, si hago esto seria insertar el iframe del body solo en ese trozo y seguir con lo que hay, y en la secundaria seria poner el iframe y listos. La idea es buena el problema que pudo tener es la estructura de la web principal que me la desmonte que la edicion manuela quede bien y el iframe con un sangrado diferente o no, no lo se, voy a probar y te cuento.
ResponderEliminarMuchas gracias
Hola hos comento, ya he conseguido hacer el iframe, los problemas que te encuentras son los formatos, tienes que editarlos muy bien, para que cuadren. De funcionar funciona perfectamente, pero importante acordaros de poner un target.
ResponderEliminarGracias
...dependiendo de si quieres seguir en la misma ventana o en otra, supongo. OK, gracias por comentarlo.
EliminarNo es así del todo, al menos en mi caso, si dentro del iframe, hay links, para mostrar estos links en condiciones hay que poner el target, por que sino lo ponemos nos abre el contenido de dicho link, en el mismo marco del iframe. A modo de ejemplo, tenemos un pdf dentro del iframe, i queremos mostrarlo bien, no que se vea solo en el marco del iframe, entonces hay que poner el target="_blank" por ejemplo, y de este modo se abrira el pdf en una pestaña completa.
EliminarGracias
A tí por la aclaración, aunque ese es el comportamiento normal de cualquier página y eso es lo que tienes en el iframe, otra página.
Eliminargracias!
ResponderEliminarHola buenas tardes, tengo una web con un iframe. Este iframe carga una pagina que es un menu. El problema que tengo ahora es que este menu cuando clico en una opcion(es un link) me carga la nueva pagina en el espacio del frame i yo quiero que me lo carge en la pagina principal, como lo hago??
ResponderEliminarMuchas gracias!!!
Prueba añadiendo al enlace target="_top"
ResponderEliminarhola, quiero poner en mi web un trozo de otra web. Asta aqui sencillo, pero quiero dejar fija la web que quiero mostrares, mostrando solo una parte de esa web (exactamente seria aliniar esa web para que me muestre la parte central).
ResponderEliminarSabes como lo puedo hacer?
Gracias!
Si la web que incrustas no es tuya, no puedes hacerlo ¿lo es?
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarcomo puedo quitar el scrol bara de este codigo por favor
Eliminara rel="shadowbox;width=800;height=450;" title="#" href="#"> /a
Ese código no debió salir bien, pero para quitarlo de un iframe, hay que añadir scrolling=no.
EliminarAmigo esta increible tu aporte, pero quiero decirte que ami no me funciona correctamente, es decir la pagina que incrusto me redirecciona a ella misma, saliendose de mi portal. Que me recomiendas hacer o como puedo solucionar esto si quieres ensaya tu... todo tiene solucion en la vida espero este a tu alcanze. Gracias
ResponderEliminarsrc="http://myradiostream.com/radiolobby/" width=450 height=250 frameborder=1 scrolling=auto>
Funciona correctamente. Es que los enlaces que ves dentro del iframe se comportan tal y como el diseñador de esa otra página decidió. Si están programados para abrir en nueva ventana, pues eso es lo que harán. Tú no puedes controlar eso si la página que visualizas no es tuya.
EliminarDisculpe, espero que alguien más no haya posteado el problema que tengo xD y esk eran un buen de comens, en fin, tengo una duda... se pueden hacer iframes que no se recarguen junto con la pagina? me explico, esque en mi web puse musica pero al navegar en el blog cada vez que recarga la pagina tambien se recarga el reproductor y yo quiero que no se "corte" he visto que si se puede pero pss no se como hacerlo D: ... me ayudan?
ResponderEliminarHola. El problema no es controlar el iframe -que no se puede- El problema es que cuando tu recargas una página recargas también todo su contenido, incluido cualquier sistema de música que tengas instalado.
ResponderEliminarA mí sólo se me ocurríó esta solución, pero no sé si te valdrá. Si encuentras otro mejor te agradecería que lo comentaras por aquí.