Javascript 如何获取所有 iframe 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3774015/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get all iframe elements?
提问by Webby
I'm showing a loading indicator while some external iframes are loaded with the following code:
我正在显示一个加载指示器，而一些外部 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>
</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.
问题是我每页运行大约 50 个迷你 iframe，我不喜欢重写上面的代码来匹配每个 iframe id。
Is there a way I could match each iframe id with a regex, for example:
有没有办法可以将每个 iframe id 与正则表达式匹配，例如：
- loading_iframe1
- loading_iframe2
- loading_iframe3
- 加载_iframe1
- 加载_iframe2
- 加载_iframe3
采纳答案by Jeff
Using plain vanilla JavaScript: Assuming the loading_iframefunction 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.
使用普通的 JavaScript：假设该loading_iframe函数对每个 iframe 执行完全相同的操作，您可以做的是拥有一个包含所有 iframe 的 ID 的数组，然后遍历该数组。
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_iframeswill 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:
或者，load_iframes如果您的 iframe ID 中有一个从 1 开始到 50 结束的序列号，并且您不需要在数组中列出所有 iframe ID，则此版本也可以使用：
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_iframeclass.
使用 jQuery：为所有 iframe 提供一个 CSS 类，例如loading_iframe. 然后，您可以使用 jQuery 选择具有loading_iframe该类的所有元素。
回答by Peter Ajtai
First, <script>tags should go either in the <head>or the <body>but not in between!
首先，<script>标签应该在<head>或<body>之间，而不是介于两者之间！
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"
现在你只需要遍历所有的iframe，就可以很方便的通过将ID改成对应的div来访问 +"-L"
To get all the iframeelements use getElementsByTagName(), then iterate over those with a for loop:
要获取所有iframe元素，请使用getElementsByTagName()，然后使用 for 循环遍历这些元素：
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 = "";
}
}
回答by spier
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:
只是添加到 Jeff 的回答中：我真的建议您查看 jQuery。它非常强大，像这样的任务应该相当简单。鉴于您给每个 iFrame 一个类“loading_iframe”，您可以执行以下操作：
$(".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.
console.log() 调用假定您在 Firefox 或 Google Chrome 中使用 FireBug。不确定这是否适用于其他浏览器。
Also see the document for .each().
