viernes, 31 de diciembre de 2010

Iframe que carga un fragmento de página




 Origen de la imagen: Paco CT
Un iframe permite incrustar en nuestra página web una ventana en la que se carga otra página web distinta sobre la que, normalmente, no tenemos control. Es decir, es ajena a nosotros. No la podemos editar.
En las entradas de los blogs de Blogger, el iframe funciona perfectamente desde hace ya  tiempo. Antes había algún problema...
El código para colocar un iframe es el siguiente:

<iframe src="http://la_url_de_la_pagina_que_queramos_cargar" width="x" height="y" frameborder="z"></iframe>

En el atributo src (source -fuente-) ponemos la URL completa de la página que queremos incrustar.
El width y el height es el ancho y alto de nuestro iframe en píxeles.
El frameborder es el borde del rectángulo en el que se carga la página web. Es muy habitual ponerlo a cero para que no se muestre borde alguno.
Nuestra intención, ahora, es colocar un iframe pero para que se cargue o muestre un elemento que no se encuentra en el principio de la página.
¿Es esto posible?


La idea es acceder a un punto concreto de la página en la que se encuentra un determinado elemento para mostrarlo.
Por ejemplo, un vídeo.
La clave está en saber si el elemento en cuestión se encuentra bajo el atributo de un name (cuando hay un ancla en el código) o de un id (identificador) de cualquier etiqueta.
En este caso, bastará simplemente, añadir al final de la URL de la dirección web de la página, la cadena #identificador siendo identificador el nombre del ancla o del id de la etiqueta en concreto.
Veamos un ejemplo.
Acabo de descubrir esta interesante página en la que se muestra un vídeo interactivo sobre la exposición de Rubens en el Museo del Prado.
El vídeo se puede descargar con las herramientas habituales. Por ejemplo con el Video DownloadHelper (la extensión para Firefox). Sin embargo, al descargarlo, pierde la interactividad pues ésta está asociada a código javascript que reside en la misma página y en otros archivos .js propiedad del mismo editor.
La solución sería colocar esta web pero que se mostrase solamente el vídeo.
Viendo el código de la página se averigua que el elemento en cuestión se encuentra en una capa bajo un atributo identificativo.
Sólo nos queda averiguar el ancho y el alto del vídeo para poderlo mostrar en sus dimensiones originales. Esto se consigue escrutando el código javascript asociado a la película.
Finalmente queremos que no se muestren las barras de scrolling. Para ello añadimos el atributo scrolling="no"
Éste es el resultado:



Como se puede comprobar los elementos interactivos estropean el regreso al vídeo inicial.
Mejor para ello verlo en la página web original:

http://www.museodelprado.es/exposiciones/info/en-el-museo/rubens/rubens-360/

8 comentarios:

Pablo Deiver dijo...

Buenas, muchas gracias por la información pero a mi no me funciona si le digo al scrolling no, me enseña un fragmento de la página y a mi me interesaria que solo enseñe el contenido de notnicias. Hay alguna solución.


web http://www.generali.es.

Hay alguna solución.

Muchas gracias

angelpuente dijo...

Respuesta a Pablo Deiver.
Pues no sé.
Supongo que este tema depende de muchas cosas.
El sitio en el que está alojada la web y los scripts que puedan ser o no compatibles.
También probablemente, el navegador con el que se esté mirando la web.
Compruébalo con otro navegador...
Siento no poder ayudarte más.
Saludos cordiales.

Pablo Deiver dijo...

Muchas gracias Ángel Puente.

En el inspeccionar de elementos de Google Chorme me dice que la id="box_noticias".

Y en la ruta del iframe le digo lo siguiente:

iframe width="260" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.generali.es/#box_noticias".

Con esto tendría que funcionar, no? Pero me enseña solo la esquina de la web.

Con explorer y Chorme me enseña lo mismo. Si no hay solución lo entiendo. Gracias igualemente.

Saludos cordiales

angelpuente dijo...

Hola Pablo.
Pues a mi sí que me funciona.
Lo que pasa es que al lado de las noticias hay otros elementos.
He quitado la barra final de la URL. Lo demás está igual con un borde para que se vea la colocación y sin anular el scrolling.
Ver la prueba:
http://pruebanuevaangelpuente.blogspot.com.es/2012/10/probando-iframe-dirigido.html

Anónimo dijo...

Hola, se que este post es del 2012 pero agradeceria si pudieras responderme.. tengo un problema con los iframes cada vez k enlazo una pagina propia de mi blog funciona de maravilla pero cuando pongo una direcicon d eotra pagina (facebook, google,etc) ejemplo src="RUTAWEBTERCERA" me sale error pork el iframe interpreta el link asi: "RUTADEMIBLOG/RUTAWEBTERCERA" es decir junta 2 direccion distintas (miblog y la pagina) y no logro solucionar eso... hay una forma de arreglarlo??

Unknown dijo...


hola una consulta, necesito insertar un fragmento de esta página.
http://es.snow-forecast.com/resorts/LagunillasSkiCenter/6day/mid

Concretamente todo lo que está dentro del class="forecasts" pero no se como encontrar el id que mencionas, me puedes ayudar?

Saludos

Anónimo dijo...

Hola, alguna forma de que si la web que has puesto esta caída salga un mensaje que elijamos o algo similar? Gracias

Alex Alegre UPC TEC1 dijo...

tengo esta web:

http://Www.ripollesdesenvolupament.com/serveis/borsa-de-treball/

i quiero hacer un link donde se vea esto:

http://productesdelripollescomapp.000webhostapp.com/Ofertes.html

pero claro al hacerlo estatico pierdo la propiedad cuando actualizan las ofertas, así que necesitaria hacer como con el video del prado.. pero no tengo ni idea :S

Related Posts Plugin for WordPress, Blogger...