Bienvenido a Foros del Web.
Lo primero que debes hacer es colocar a cada
<div> en el espacio comprendido por cada
<li> o llevarlo hacia otro contenedor. Esto es porque, el elemento
<ul>, debe usarse solo para listar a elementos
<li> de forma desordenada; de allí viene su nombre:
unordered
list (lista desordenada). Es más una cuestión semántica que de funcionamiento.
Suponiendo que hiciste lo primero, te quedaría algo similar a esto:
Lo que ahora tienes que hacer es reemplazar al atributo
id de cada
<div> por el atributo
class u otro. Esto es porque no debe repetirse el valor de un
id en el documento HTML. Se trata de un valor único e irrepetible.
Realizando dicho cambio, el esquema quedaría muy parecido a esto:
La idea de hacer estos cambios es que se le pueda dar un clic a cualquier enlace de la lista y se cargue el contenido del
<iframe> contenido en el
<div> que se encuentra insertado en el mismo elemento
<li> en el que está el enlace y, una estructura como esta, ayuda a que el proceso mediante JavaScript sea más sencillo. Dado a que los enlaces tienen como propósito enlazar hacia otra dirección electrónica o
anclar en algún elemento del documento (mover a la barra de desplazamiento vertical hasta la posición del elemento cuyo
id sea igual al valor del atributo
href del enlace pulsado), lo aconsejable es que utilices otro elemento. Por ejemplo, podrías usar elementos
<span> a los cuales les asignarías una clase para poder identificarlos y diferenciarlos de otros elementos
<span> que pudiera haber en otras secciones del documento. Y como la idea es que el contenido de cada
<iframe> no cargue al inicio, podrías almacenar el valor de la ruta en un
atributo personalizado.
Así es como quedaría el esquema hasta este punto:
Añadí un
id al elemento
<ul> para poder tomarlo fácilmente en el código JavaScript. Teniendo esto, ya podemos pasar a la parte funcional.
Ahora bien, como tenemos a varios elementos similares y quieres que se cargue el contenido de cada
<iframe> al darle un clic al
<span> que se encuentra en cada
<li>, te aconsejo delegar dicho evento (el evento
click) al elemento
<ul>; de esta forma, cuando este se produzca en cualquier parte del mismo (la lista), se verificará que el elemento objetivo (el elemento al que se le dio el clic) posea la clase "enlace"; de ser así, se cargará el contenido del
<iframe> vecino a partir del valor del atributo personalizado que este posea.
Esto sería así:
Código Javascript
:
Ver original//Luego de cargar la página
document.addEventListener("DOMContentLoaded", function(){
//Delegamos el evento click al elemento <ul>
document.querySelector("#lista").addEventListener("click", function(event){
var elementoAfectado = event.target; //Capturamos al elemento afectado por el clic
if (elementoAfectado.className == "enlace"){ //Si la clase del elemento es igual a "enlace"
var elLi = elementoAfectado.parentNode, //El elemento padre del <span>, o sea, el <li>
elDiv = elLi.querySelector(".modal"), //El elemento <div> contenido en el <li>
elIframe = elDiv.querySelector("iframe"), //El elemento <iframe> contenido en el <div>
laRuta = elIframe.dataset.src; //La ruta contenida en el atributo personalizado del <iframe>
elIframe.src = laRuta; //Asignamos la ruta al <iframe> y procederá a cargar el contenido
}
}, false);
}, false);
Luego de cargar el DOM o modelo de objetos del documento (evento
DOMContentLoaded), se procede a registrar al evento
click en el elemento
<ul> al cual tomamos por el valor de su
id. Al producirse este, se ejecutará una función anónima que ejecutará un conjunto de instrucciones. En este caso, se tomará al elemento afectado por el evento y se verificará que posea la clase "enlace" para determinar si se trata de alguno de los elementos
<span> de la lista. Al cumplirse la condición, se procede a tomar al elemento que contiene al
<li>, se captura al elemento
<div> contenido, al
<iframe> insertado en el
<div>, al valor del atributo personalizado del
<iframe> y, finalmente, se asigna este último valor al atributo
src del
<iframe> para que pueda cargar el contenido respectivo.
Ejemplo en vivo
Algunas referencias para entender mejor el código:
- Mediante el método
.addEventListener(), registramos un evento en un elemento del documento. - El método
.querySelector() permite seleccionar un elemento contenido en el elemento que se especifique antes del punto. - En la variable
event se encuentra el objeto del evento, mismo que posee el atributo target que es en el que se almacena una referencia hacia el elemento directamente afectado por el evento producido. - La propiedad
parentNode registra una referencia hacia el elemento que contiene al elemento asociado mediante el punto: element.parentNode (elemento que contiene a element).
Por cierto, si realizaras peticiones asíncronas (AJAX), también cargarías de peticiones al servidor.
Optimizar de carga pagina 
Respuesta: Optimizar de carga pagina 
