Está bien. Me encontré con un evento de Jquery simple en el que al hacer clic, carga una página en un IFRAME en su respectivo DIV.
JS Fiddle aquí

Ahora, lo que realmente quiero lograr es

  1. en lugar de usar dos códigos separados clasificándolos por # frame1, # frame2, lo necesito para cargar los eventos usando el mismo código

    showIframe = function (url) { document.getElementById('iframetarget').src = url; document.getElementById('frame').style.display = 'block'; }

  2. Al hacer clic en 1 en el estilo de lista, se carga la página de iframe correspondiente; ahora, al hacer clic en 2 en el estilo de lista, se carga la página de iframe correspondiente para 2 y la página cargada en 1 va a desaparecer (o asesinarse, jejeje)

Demostración de violín deseada

Entiendo que no es posible usar el mismo ID en el Div, así que intenté usar la sintaxis document.getElementByClassName, pero no funciona.
Cualquier ayuda por favor.

1
Lemdor 18 feb. 2015 a las 15:45

4 respuestas

La mejor respuesta

Pruebe este jsFiddle. Dos iframes están conectados a los enlaces a través del valor de URL de datos

var btns = document.getElementsByClassName('iframe-btn');
for( var i=0;i<btns.length;i++){
    btns[i].addEventListener("click", function(e){
        e.preventDefault();
        var url = this.getAttribute('data-url');
        var target = this.getAttribute('href').split('#')[1];

        var iframes = document.getElementsByTagName('iframe');
        for( var j=0;j<btns.length;j++){
            iframes[j].src='';
        }
        document.getElementById(target).src = url;
        document.getElementById(target).style.display = 'block'; 
    }, false);
}
1
Jackson 18 feb. 2015 a las 14:13
  1. Debe agregar detectores de eventos a través del código, p. Ej.

    $ ('# elemento'). on ('clic', función () {// lógica});

  2. Cada evento pasa un objeto al controlador, que contiene al ejecutor. Puede darle al ejecutor algunos atributos de datos * que contengan una URL o algo así.

Aquí algunas referencias:

0
David Hölkeskamp 18 feb. 2015 a las 13:25

Con el código jquery prueba esto

Html

<ul>
<li><a href="#frame1" onclick="showIframe('http://www.uibrush.com/');">1</a></li>
<li><a href="#frame2" onclick="showIframe2('http://imgur.com/');">&nbsp;2</a></li>
</ul>
<br><br>


<div id="frame1" style="background-color:#9C27B0">
<iframe id='iframetarget1' class="full" frameborder="0" src=""></iframe>
</div>
<br>


<div id="frame2" style="background-color:#ffd800">
<iframe id='iframetarget2' class="full" frameborder="0" src=""></iframe>
</div>   

Javascript

$("#link1").click(showIframe);
$("#link2").click(showIframe);

function showIframe() {
   var target ='#'+ $(this).attr('data-target');
   var url = $(this).attr('data-url');
   $(target).attr('src',url);  
   $(target).parent().css("display:'block'");
}

https://jsfiddle.net/q8co5tpe/

0
ThomasS 18 feb. 2015 a las 13:20

¡Espero que esto funcione! Estoy usando el atributo getelementbyClassName aquí ...

http://jsfiddle.net/rajmathan/3420cbkt/

Sigue el código HTML:

<ul>
<li><a href="#frame" onclick="showIframe('http://www.uibrush.com/');">1</a></li>
<li><a href="#frame" onclick="showIframe('http://imgur.com/');">&nbsp;2</a></li>
</ul>  

<div id="frame" style="background-color:#9C27B0">
<iframe id='iframetarget' class="full" frameborder="0" src=""></iframe>
</div>

Sigue Javascript:

showIframe = function (url) {

    var divs = document.getElementsByClassName('full');
for(var i=0; i < divs.length; i++) { 
  divs[i].src = url;
}

    //document.getElementByClassName('full').src = url;
    document.getElementById('frame').style.display = 'block';
}

CSS sigue:

ul{list-style:none;position: fixed;margin:0;padding:0;}
ul li{float:left}
a{text-decoration:none}

.full {width:100%; height:100%;}
1
rajmathan 18 feb. 2015 a las 13:29