Question

我正在显示加载指示符，而一些外部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>

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

有没有办法可以将每个iframe id与正则表达式匹配，例如：

loading_iframe1
loading_iframe2
loading_iframe3

Answer 1

首先，<script>代码应该放在<head>或<body>中，而不是介于两者之间！

我会稍微改变你的命名方案：

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

现在您只需遍历所有iframe，即可通过将ID更改为+"-L"

轻松访问相应的div

要使所有iframe元素都使用 getElementsByTagName() ，然后使用for循环遍历这些元素：

这样的事情：

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

Answer 2

使用普通的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 = "";
    }
}

或者，如果您的iframe ID中的序号从1开始到50结束，则此版本的load_iframes将有效，并且您无需列出所有iframe ID一个数组：

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类的所有元素。

Answer 3

刚刚添加到Jeff的回答：我真的建议你查看jQuery。它非常强大，这样的任务应该相当简单。鉴于您为每个iFrame提供了一个“loading_iframe”类，您可以执行以下操作：

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

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

另见document for .each()。

如何获取所有iframe元素？

3 个答案: