Obtener todos los elementos iframe - Excelente biblioteca

Hola chicos estoy mostrando un indicador de carga, mientras que algunos marcos flotantes externos se cargan con el siguiente código:Obtener todos los elementos iframe

<html> 

<head> 
    <title>Loading iframe</title> 
</head> 

<script> 


function loading_iframe(){ 
    document.getElementById('loading_iframe').style.display = "none"; 
    document.getElementById('loading').style.display = ""; 
    document.getElementById('loading_iframe').onload = function(){ 
     document.getElementById('loading').style.display = "none"; 
     document.getElementById('loading_iframe').style.display = ""; 
    } 
} 
</script> 

<body> 
<iframe id="loading_iframe" src="iframe.html" width="800" height="100"></iframe> 
<div id="loading">Loading...</div> 


<script> 
loading_iframe(); 

</script>

El problema es que estoy corriendo alrededor de 50 mini-iframes por página y yo don' t fantasía reescribir el código anterior para que coincida con cada uno Identificación del marco flotante lol ... sí, yo soy mucho de un novato en js jaja

¿hay alguna manera de que pudiera coincidir con cada uno Identificación del marco flotante con un ejemplo de expresiones regulares loading_iframe1 loading_iframe2 loading_iframe3

Espero que tenga sentido?

Cualquier idea

Fuente

2010-09-22 Webby

Lo he agregado a mi respuesta, pero no debería poner las etiquetas '

En primer lugar, <script> etiquetas deben ir ya sea en el <head> o la <body> pero no en el medio!

que cambiaría el esquema de denominación poco a esto:

<iframe id="iframe1" src="iframe.html" width="800" height="100"></iframe> 
<div id="iframe1-L">Loading...</div> 

<iframe id="iframe2" src="blah.html" width="800" height="100"></iframe> 
<div id="iframe2-L">Loading...</div>

Ahora sólo hay que recorrer todos los marcos flotantes, y se puede acceder fácilmente a la div correspondiente al cambiar el ID de +"-L"

para obtener todos los elementos iframe utilizan getElementsByTagName(), a continuación, iterar sobre los que tienen un bucle for:

Algo como esto:

var i, frames; 
frames = document.getElementsByTagName("iframe"); 
for (i = 0; i < frames.length; ++i) 
{ 
     // The iFrame 
    frames[i].style.display = "none"; 
     // The corresponding DIV 
    getElementById(frames[i].id + "-L").style.display = ""; 
    frames[i].onload = function() 
    { 
     getElementById(frames[i].id + "-L").style.display = "none"; 
     frames[i].style.display = ""; 
    } 
}

Fuente

2010-09-22 22:17:04

Apenas agregando a la respuesta de Jeff: Realmente le recomiendo que revise jQuery. Es muy poderoso y una tarea como esta debería ser bastante simple. Teniendo en cuenta que se aplica cada una iFrame "loading_iframe" clase en la que puede hacer algo como:

$(".loading_iframe").each(function(index) { 
    console.log(this); ; 
});

El console.log() llamada asume que utiliza Firebug en Firefox o Google Chrome. No estoy seguro de si eso funciona en otros navegadores.

Ver también document for .each().

Fuente

2010-09-22 22:36:37 spier

Desbordamiento de pila estereotípica "¿Has oído hablar de jquery" respuesta :) – marcospgp

Sí, no hay nada mágico acerca de jQuery, puedes hacer esto sin él también: 'Array.prototype.forEach.call (document.getElementsByClassName (" loading_frame ") , function (frame) {console.log (frame);}) '. Un poco más detallado pero puede refactorizarlo en su caso de uso común y no necesita cargar jQuery. – amn

Cuestiones relacionadas