Javascript 如何获取所有iframe元素？_Javascript_Regex_Iframe

Javascript 如何获取所有iframe元素？

javascript regex iframe

Javascript 如何获取所有iframe元素？,javascript,regex,iframe,Javascript,Regex,Iframe,当一些外部iFrame加载以下代码时，我显示了一个加载指示器： <html> <head> <title>Loading iframe</title> </head> <script> function loading_iframe(){ document.getElementById('loading_iframe').style.display =

当一些外部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>


加载iframe
函数加载\u iframe（）{
document.getElementById（'loading_iframe'）.style.display=“none”；
document.getElementById（'loading'）.style.display=“”；
document.getElementById（'loading_iframe'）。onload=function（）{
document.getElementById（'loading'）.style.display=“无”；
document.getElementById（'loading_iframe'）.style.display=“”；
}
}
加载。。。
加载_iframe（）；

问题是我每页运行大约50个迷你iframe，我不想重写上面的代码来匹配每个iframe id

是否有一种方法可以将每个iframe id与正则表达式匹配，例如：

加载iframe1
加载iframe2
加载iframe3

首先，

标签应该放在

或

中，但不能放在两者之间

我会将您的命名方案稍微更改为：

<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>

使用普通的JavaScript：假设

load\u 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 = "";
    }
}

使用jQuery：为所有iframe提供一个CSS类，例如

loading\u iframe

。然后，您可以使用jQuery选择所有具有

加载iframe

类的元素。

只是添加到Jeff的答案中：我真的建议您检查jQuery。它非常强大，像这样的任务应该相当简单。假设给每个iFrame一个类“loading_iFrame”，您可以执行以下操作：

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

调用console.log（）假定您在Firefox或Google Chrome中使用FireBug。不确定这是否适用于其他浏览器

另请参见。

将其添加到我的答案中，但您不应该在

头部和正文之间放置
标记。。。。。它们应该在头部
中准备好文档，或者在正文中所需的html
之后。。。。通常在
标记之前。是的，jQuery没有什么神奇之处，没有它也可以做到：数组.prototype.forEach.call（document.getElementsByClassName（“加载框架”）、函数（框架）{console.log（框架）；}）。更详细一点，但您可以将其重构到您的通用用例中，并且不需要加载jQuery。
function load_iframes() {
    num_iframes = 50;
    for (i = 1; i <= num_iframes; i++) {
        loading_iframe("loading_iframe" + i);
    }
}

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