quiero aprender a crear con iframe

cartau07 · #1 (**permalink**) 02/04/2016, 08:27

buena que pena molestar quiero aprender como hacer un repositorio de muchas paginas de noticias e información con iframe... pues la verdad yo se que con iframe habré link indebido y una parte de el como que muestre el enlace una parte de información del link y al hacer click ir a url la verdad ando muy confundida de como hacerlo no se si me explique bien

xfxstudios · #2 (**permalink**) 02/04/2016, 09:45

debe ser asi:

Código HTML:

Ver original<a href="http://noticia.com?id=a" target="ventana">Ver Noticia A</a>
<a href="http://noticia.com?id=b" target="ventana">Ver Noticia B</a>
<a href="http://noticia.com?id=c" target="ventana">Ver Noticia C</a>
 
 
<iframe name="ventana" id="ventana" width="100%" height="400px" src="ventana_de_inicio.html"></iframe>

algo asi mas o menos

cartau07 · #3 (**permalink**) 02/04/2016, 09:48

y si mi link son de paginas de internet :(

xfxstudios · #4 (**permalink**) 02/04/2016, 10:36

Cita:

Iniciado por cartau07

y si mi link son de paginas de internet :(

como puedes leer alli te coloque un ejemplo bastante claro, es decir, solo tienes que indicarle al enlace que debe abrir la url en el iframe target="ventana"

no importa si son enlaces internos o externos los va a abrir alli

MUESTRA: http://codepen.io/xfxstudios/pen/eZGrwV

cartau07 · #5 (**permalink**) 02/04/2016, 10:47

hola que pena jiji si ya capte pero mi problema es que quiero que salga en cuadro en un pedazo de mi pagina como seria hay pues lo hago y me aparece pantalla completa y no me separa bueno te enviara una imagen como quisiera pero no se enviar fotos aqui o pantallazos

xfxstudios · #6 (**permalink**) 02/04/2016, 10:52

de la misma forma que lo hice yo en el ejemplo, claro alli estoy utilizando bootstrap como css y separe el area de los enlaces de la de la ventana iframe, habria que ver com piuenzas hacerlo tu, para cargar una imagen tienes que primero subirla a un sitio de alojamiento de imagenes en la internet y luego cargas la url que te da el sitio con el icono de imagen que esta en la parte superior de la ventana de edicion (donde escribes el comentario) y listo. Saludos

cartau07 · #7 (**permalink**) 04/04/2016, 07:03

Pues si ya lo vi pero es muy diferente pero creo que estare confundida pero te mostrare la pagina a la quie me baso hay un cuadrito que dice @alcaldiademed en esta pagina https://www.medellin.gov.co/irj/portal/medellin bueno asi es quiero que me aparescas los link por que tengo muchos y son de muchos hoteles y es un requerimiento pedido por la empresa donde estoy haciendole el proyecto de grado help me gracias

xfxstudios · #8 (**permalink**) 04/04/2016, 13:07

bueno en ese caso, el que me muestras es un widget de twitter y los que estan a los lados, no necesitas cargar iframes para ello solo tiene que utilizar la propiedad overflow de css en un div, crear la lista dentro del div y listo

aqui una muestra: https://jsfiddle.net/xfxstudios/8x58f7no/

cartau07 · #9 (**permalink**) 04/04/2016, 15:41

ahhh perfecto esa parte si la entiendo perfectamente es hacer un div ydentro del traer los enlances pero el truco total esta en css ok muchas gracias si me da publicare

cartau07 · #10 (**permalink**) 05/04/2016, 11:17

Hola que pena Volverte a Molestar ya lo hice me quedo perfecto pero al recargar mi pagina esta re lenta que puedo hacer Help me mira codigo

Código HTML:

    <style type="text/css">
    #lista{
    width: 600px;
    height: 500px;
    overflow: scroll;
}
    </style>
<div class="alert alert-info">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6" id="lista">
    <ul class="list-group">
      <li class="list-group-item"><iframe src="https://www.tripadvisor.co/Hotel_Review-g297478-d676819-Reviews-Leblon_Suites_Hotel-Medellin_Antioquia_Department.html#HEADING_GROUP" scrolling="no" width="100%" height="65" framedorber="1"></iframe><a href="https://www.tripadvisor.co/Hotel_Review-g297478-d676819-Reviews-Leblon_Suites_Hotel-Medellin_Antioquia_Department.html#REVIEWS"> ver mas sobre Leblon en tripadvisor</a></li>
      <li class="list-group-item"><iframe src="https://www.tripadvisor.co/Hotel_Review-g297478-d656344-Reviews-Hotel_Novelty_Suites-Medellin_Antioquia_Department.html#HEADING_GROUP" scrolling="no" width="100%" height="65" framedorber="1"></iframe><a href="https://www.tripadvisor.co/Hotel_Review-g297478-d656344-Reviews-Hotel_Novelty_Suites-Medellin_Antioquia_Department.html#REVIEWS">ver mas sobre Leblon en tripadvisor</a></li>
      <li class="list-group-item"><iframe src="https://www.tripadvisor.co/Hotel_Review-g297478-d678435-Reviews-Affinity_Aparta_Hotel-Medellin_Antioquia_Department.html#HEADING_GROUP" scrolling="no" width="100%" height="65"></iframe><a href="https://www.tripadvisor.co/Hotel_Review-g297478-d678435-Reviews-Affinity_Aparta_Hotel-Medellin_Antioquia_Department.html#REVIEWS">ver mas sobre Leblon en tripadvisor</a></li>
      <li class="list-group-item"><iframe src="https://www.tripadvisor.co/Hotel_Review-g297478-d1733024-Reviews-Portal_del_Rodeo_Aparta_Hotel-Medellin_Antioquia_Department.html#HEADING_GROUP" scrolling="no" width="100%" height="65" framedorber="1"></iframe><a href="https://www.tripadvisor.co/Hotel_Review-g297478-d1733024-Reviews-Portal_del_Rodeo_Aparta_Hotel-Medellin_Antioquia_Department.html#REVIEWS">ver mas sobre Leblon en tripadvisor</a></li>
      <li class="list-group-item"><iframe src="https://www.tripadvisor.co/Hotel_Review-g297478-d1883582-Reviews-Alcazar_de_Oviedo-Medellin_Antioquia_Department.html#HEADING_GROUP" scrolling="no" width="100%" height="65" framedorber="1"></iframe><a href="https://www.tripadvisor.co/Hotel_Review-g297478-d1883582-Reviews-Alcazar_de_Oviedo-Medellin_Antioquia_Department.html#REVIEWS">ver mas sobre Leblon en tripadvisor</a></li>
      <li class="list-group-item"><iframe src="http://www.booking.com/hotel/co/affinity-aparta.es-ar.html?label=gen173nr-1FCAEoggJCAlhYSDNiBW5vcmVmaDKIAQGYASzCAQNhYm7IAQ_YAQHoAQH4AQuoAgQ;sid=1e4a6ba9a9b97cbf3f555c20513ce7bb;dcid=4;dest_id=-592318;dest_type=city;dist=0;group_adults=2;room1=A%2CA;sb_price_type=total;srfid=c84e8fc2f03a12936500c47e204b558efa56841fX9;type=total;ucfs=1&#wrap-hotelpage-top" scrolling="no" width="100%" height="65" framedorber="1"></iframe>
      <a href="http://www.booking.com/hotel/co/affinity-aparta.es-ar.html?label=gen173nr-1FCAEoggJCAlhYSDNiBW5vcmVmaDKIAQGYASzCAQNhYm7IAQ_YAQHoAQH4AQuoAgQ;sid=1e4a6ba9a9b97cbf3f555c20513ce7bb;dcid=4;dest_id=-592318;dest_type=city;dist=0;group_adults=2;room1=A%2CA;sb_price_type=total;srfid=c84e8fc2f03a12936500c47e204b558efa56841fX9;type=total;#tab-reviews&review_list_score"></a></li>
      <li class="list-group-item"><iframe src="http://www.booking.com/hotel/co/novelty-suites.es-ar.html?label=gen173nr-1DCAEoggJCAlhYSDNiBW5vcmVmaDKIAQGYASzCAQNhYm7IAQ_YAQPoAQGoAgQ;sid=1e4a6ba9a9b97cbf3f555c20513ce7bb;dcid=4;checkin=2016-04-01;checkout=2016-04-02;dest_id=-592318;dest_type=city;dist=0;group_adults=2;highlighted_blocks=37687101_90425068_0_1;room1=A%2CA;sb_price_type=total;srfid=cd4cf72758f503ff2c71f1bab8897d07ac526016X15;type=total;ucfs=1&#wrap-hotelpage-top" scrolling="no" width="100%" height="65" framedorber="1"></iframe>
      <a href="http://www.booking.com/hotel/co/novelty-suites.es-ar.html?label=gen173nr-1DCAEoggJCAlhYSDNiBW5vcmVmaDKIAQGYASzCAQNhYm7IAQ_YAQPoAQGoAgQ;sid=1e4a6ba9a9b97cbf3f555c20513ce7bb;dcid=4;checkin=2016-04-01;checkout=2016-04-02;dest_id=-592318;dest_type=city;dist=0;group_adults=2;highlighted_blocks=37687101_90425068_0_1;room1=A%2CA;sb_price_type=total;srfid=cd4cf72758f503ff2c71f1bab8897d07ac526016X15;type=total;ucfs=1&#tab-reviews"></a></li>
      <li class="list-group-item"><iframe src="http://www.booking.com/hotel/co/leblon-suites.es-ar.html?label=gen173nr-1DCAEoggJCAlhYSDNiBW5vcmVmaDKIAQGYASzCAQNhYm7IAQ_YAQPoAQGoAgQ;sid=1e4a6ba9a9b97cbf3f555c20513ce7bb;dcid=4;checkin=2016-04-01;checkout=2016-04-02;dest_id=-592318;dest_type=city;dist=0;group_adults=2;highlighted_blocks=37767701_90425082_0_1;room1=A%2CA;sb_price_type=total;srfid=cd4cf72758f503ff2c71f1bab8897d07ac526016X25;type=total;ucfs=1&#wrap-hotelpage-top">
      <a href="http://www.booking.com/hotel/co/leblon-suites.es-ar.html?label=gen173nr-1DCAEoggJCAlhYSDNiBW5vcmVmaDKIAQGYASzCAQNhYm7IAQ_YAQPoAQGoAgQ;sid=1e4a6ba9a9b97cbf3f555c20513ce7bb;dcid=4;checkin=2016-04-01;checkout=2016-04-02;dest_id=-592318;dest_type=city;dist=0;group_adults=2;highlighted_blocks=37767701_90425082_0_1;room1=A%2CA;sb_price_type=total;srfid=cd4cf72758f503ff2c71f1bab8897d07ac526016X25;type=total;ucfs=1&#tab-reviews"></a></a></li>
      <li class="list-group-item"></li>
    </ul>
  
  </div>
  </div>