Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Cambiar URL de un iframe al presionar un Boton

Estas en el tema de Cambiar URL de un iframe al presionar un Boton en el foro de Javascript en Foros del Web. Hola, bueno quisiera que me ayuden con un problema que tengo el cual no puedo solucionar La idea es cambiar la URL del iframe el ...
  #1 (permalink)  
Antiguo 27/12/2013, 16:53
 
Fecha de Ingreso: octubre-2009
Mensajes: 39
Antigüedad: 9 años, 11 meses
Puntos: 1
Cambiar URL de un iframe al presionar un Boton

Hola, bueno quisiera que me ayuden con un problema que tengo el cual no puedo solucionar

La idea es cambiar la URL del iframe el presionar el button.

Aquí dejo un ejemplo:



Quisiera poder cambiar la url del iframe...
  #2 (permalink)  
Antiguo 27/12/2013, 21:04
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.427
Antigüedad: 7 años, 10 meses
Puntos: 929
Respuesta: Cambiar URL de un iframe al presionar un Boton

Podrías crear un pseudo-atributo para cada botón, en donde estaría la dirección que debe de cambiarse en el atributo src del iframe. Un pequeño ejemplo:


El documento HTML, en el que están el iframe y los botones
Código HTML:
Ver original
  1. <iframe id = "capa"></iframe>
  2. <button data-link = "pagina1.html">ARRIBA</button>
  3. <button data-link = "pagina2.html">ABAJO</button>
  4. <button data-link = "pagina3.html">IZQUIERDA</button>
  5. <button data-link = "pagina4.html">DERECHA</button>

El documento JavaScript, en donde se realizará el proceso
Código Javascript:
Ver original
  1. var botones = document.getElementsByTagName("button"),
  2.     iframe = document.getElementById("capa"),
  3.     sizeBotones = botones.length;
  4.  
  5. for (i = 0; i < sizeBotones; i++){
  6.     botones[i].addEventListener("click", function(){
  7.         iframe.src = this.getAttribute("data-link");
  8.     }, false);
  9. }

Básicamente, tomo los cuatro botones, los inserto en un array y con ayuda de un bucle, le asigno a cada uno el evento "click" para que cuando se pulse cada botón, se le asigne al atributo src del iframe, el valor del pseudo-atributo data-link del botón que es en donde está contenida la dirección.

Saludos
__________________
«Laissez faire et laissez passer, le monde va de lui même»

Última edición por Alexis88; 28/12/2013 a las 08:22
  #3 (permalink)  
Antiguo 28/12/2013, 09:18
 
Fecha de Ingreso: octubre-2009
Mensajes: 39
Antigüedad: 9 años, 11 meses
Puntos: 1
Respuesta: Cambiar URL de un iframe al presionar un Boton

Miren me he trabado aqui no logro hacer aumentar el contador.

Al comienzo si muestra la Pagina N° 1 y luego al hacer clic al enlace me lleva a pagina N°2, pero al hacer otro clic ya no me lleva a la pagina N° 3

Código PHP:
<?php
static $contador=1;
$contador $contador++;
$url="";

if (
$contador==1)
{
$url="Pagina2.html";
}
elseif (
$contador==2)
{
$url="Pagina3.html";
}
echo 
"<a href=$url target='collector-iframe'>Visita Siguiente Pagina</a>";
?>
<br />
<div>
<iframe name="collector-iframe" id="collector-iframe" src="Pagina1.html"></iframe>
  #4 (permalink)  
Antiguo 28/12/2013, 09:31
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.427
Antigüedad: 7 años, 10 meses
Puntos: 929
Respuesta: Cambiar URL de un iframe al presionar un Boton

Esto no lo debes de trabajar en PHP, sino en JavaScript, además, el bucle que uso en el ejemplo, es para asignar los eventos a cada botón.

Aquí puedes ver en funcionamiento el ejemplo que hice.

Saludos
__________________
«Laissez faire et laissez passer, le monde va de lui même»

Última edición por Alexis88; 28/12/2013 a las 09:41
  #5 (permalink)  
Antiguo 28/12/2013, 14:09
 
Fecha de Ingreso: octubre-2009
Mensajes: 39
Antigüedad: 9 años, 11 meses
Puntos: 1
Respuesta: Cambiar URL de un iframe al presionar un Boton

Cita:
Iniciado por Alexis88 Ver Mensaje
Esto no lo debes de trabajar en PHP, sino en JavaScript, además, el bucle que uso en el ejemplo, es para asignar los eventos a cada botón.

Aquí puedes ver en funcionamiento el ejemplo que hice.

Saludos
Eso es exactamente lo que deseo pero con un solo boton.

POR FAVOR ayudame te lo agradeceria mucho. :)

(Que avance de una URL a otra URL cada vez que presione el boton)

Casi no se Java Script :(
  #6 (permalink)  
Antiguo 28/12/2013, 18:43
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.427
Antigüedad: 7 años, 10 meses
Puntos: 929
Respuesta: Cambiar URL de un iframe al presionar un Boton

Como vi las cuatro flechas, pensé que querías cuatro botones. Bueno, en ese caso, podrías poner todos los enlaces en un array y con cada clic, irás avanzando de uno en uno por dicho array para ir cambiando de página. Cuando llegue al último elemento del array, es decir, al último enlace y se vuelva a dar clic, tomará el primer enlace del array, con lo cual, se volverá un ciclo infinito.

En el documento HTML
Código HTML:
Ver original
  1. <iframe id = "capa"></iframe>
  2. <button id = "enlace">Siguiente</button>

En el documento JavaScript
Código Javascript:
Ver original
  1. var enlaces = [
  2.                 "http://www.youtube.com/embed/ChbWhAtqEnA",
  3.                 "http://www.youtube.com/embed/Zi8vJ_lMxQI",
  4.                 "http://www.youtube.com/embed/_mVW8tgGY_w",
  5.                 "http://www.youtube.com/embed/xl48QIxMXQg"
  6.               ],
  7.     boton = document.querySelector("#enlace"),
  8.     capa = document.querySelector("#capa"),
  9.     contador = 0,
  10.     sizeEnlaces = enlaces.length - 1;
  11.  
  12. capa.src = enlaces[contador];
  13. boton.addEventListener("click", function(){
  14.   contador = contador == sizeEnlaces ? 0 : contador + 1;
  15.   capa.src = enlaces[contador];
  16. }, false);

Y el ejemplo en ejecución, lo puedes ver aquí.

Saludos
__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #7 (permalink)  
Antiguo 29/12/2013, 11:05
 
Fecha de Ingreso: octubre-2009
Mensajes: 39
Antigüedad: 9 años, 11 meses
Puntos: 1
Respuesta: Cambiar URL de un iframe al presionar un Boton

Muchas gracias, exactamente lo que buscaba.
Ya solo me queda aplicar css para que quede exactamente como esta en la imagen :)

Solucionado!!! :)

Etiquetas: boton, iframe, presionar, url
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:44.