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

[Jh0rdy]

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...

[Alexis88]

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:

<iframe id = "capa"></iframe>
<button data-link = "pagina1.html">ARRIBA</button>
<button data-link = "pagina2.html">ABAJO</button>
<button data-link = "pagina3.html">IZQUIERDA</button>
<button data-link = "pagina4.html">DERECHA</button>
 

El documento JavaScript, en donde se realizará el proceso

Código Javascript:

var botones = document.getElementsByTagName("button"),
    iframe = document.getElementById("capa"),
    sizeBotones = botones.length;
 
for (i = 0; i < sizeBotones; i++){
    botones[i].addEventListener("click", function(){
        iframe.src = this.getAttribute("data-link");
    }, false);
}
 

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

[Jh0rdy]

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>  

[Alexis88]

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

[Jh0rdy]

Iniciado por Alexis88

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 :(

[Alexis88]

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:

<iframe id = "capa"></iframe>
<button id = "enlace">Siguiente</button>
 

En el documento JavaScript

Código Javascript:

var enlaces = [
                "http://www.youtube.com/embed/ChbWhAtqEnA",
                "http://www.youtube.com/embed/Zi8vJ_lMxQI",
                "http://www.youtube.com/embed/_mVW8tgGY_w",
                "http://www.youtube.com/embed/xl48QIxMXQg"
              ],
    boton = document.querySelector("#enlace"),
    capa = document.querySelector("#capa"),
    contador = 0,
    sizeEnlaces = enlaces.length - 1;
 
capa.src = enlaces[contador];
boton.addEventListener("click", function(){
  contador = contador == sizeEnlaces ? 0 : contador + 1;
  capa.src = enlaces[contador];
}, false);
 

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

Saludos

[Jh0rdy]

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

Solucionado!!! :)