How do I get all iframe elements?
I'm showing a loading indicator while some external iframes are loaded with the following code:
<html>
<head>
开发者_如何学Go<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>
</body>
</html>
Problem is I'm running around 50 mini iframes per page and I don't fancy rewriting the code above to match each iframe id.
Is there a way I could match each iframe id with a regex, for example:
- loading_iframe1
- loading_iframe2
- loading_iframe3
First, <script> tags should go either in the <head> or the <body> but not in between!
I would change your naming scheme slightly to this:
<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>
Now you just have to loop through all the iframes, and you can easily access the corresponding div by changing the ID to +"-L"
To get all the iframe elements use getElementsByTagName(), then iterate over those with a for loop:
Something like this:
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 = "";
}
}
Using plain vanilla JavaScript: Assuming the loading_iframe function performs the exact same action for every iframe, what you can do is have an array that contains the IDs of all iframes, then loop through that array.
function load_iframes() {
iframes = ["loading_iframe1", "loading_iframe2", "loading_iframe3"];
for (i = 0; i < iframes.length; i++) {
loading_iframe(iframes[i]);
}
}
function loading_iframe(iframe_id){
document.getElementById(iframe_id).style.display = "none";
document.getElementById('loading').style.display = "";
document.getElementById(iframe_id).onload = function(){
document.getElementById('loading').style.display = "none";
document.getElementById(iframe_id).style.display = "";
}
}
Alternatively, this version of load_iframes will work if you're going to have a sequential number in your iframe IDs starting at 1 and ending at 50, and you don't need to list all your iframe IDs in an array:
function load_iframes() {
num_iframes = 50;
for (i = 1; i <= num_iframes; i++) {
loading_iframe("loading_iframe" + i);
}
}
Using jQuery: Give all iframes a CSS class such as loading_iframe. You can then use jQuery to select all elements that have the loading_iframe class.
Just adding to Jeff's answer: I really recommend you to check out jQuery. It is very powerful and a task like this should be fairly simple. Given that you give each iFrame a class "loading_iframe" you can do something like:
$(".loading_iframe").each(function(index) {
console.log(this); ;
});
The console.log() call assumes that you use FireBug in Firefox or Google Chrome. Not sure if that works in other browsers.
Also see the document for .each().
加载中,请稍侯......
精彩评论