如何获取所有iframe元素? [英] How do I get all iframe elements?
问题描述
在显示一些外部iframe时，我正在显示一个加载指示器，其代码如下:
I'm showing a loading indicator while some external iframes are loaded with the following code:
<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>
问题是我每页运行约50个小型iframe，并且我不愿意重写上面的代码来匹配每个iframe id.
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.
有没有一种方法可以使每个iframe ID与一个正则表达式匹配，例如:
Is there a way I could match each iframe id with a regex, for example:
- loading_iframe1
- loading_iframe2
- loading_iframe3
推荐答案
使用普通的JavaScript:假设loading_iframe函数对每个iframe都执行完全相同的操作，那么您可以做的是创建一个数组，其中包含ID为所有iframe，然后遍历该数组.
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 = "";
}
}
或者，如果您要在iframe ID中使用从1开始到50结束的序列号，并且无需在数组中列出所有iframe ID，则此版本的load_iframes也可以使用:
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);
}
}
使用jQuery:为所有iframe提供CSS类，例如loading_iframe.然后，您可以使用jQuery选择具有loading_iframe类的所有元素.
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.
这篇关于如何获取所有iframe元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
