可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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>

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

回答1:

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.

回答2:

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

回答3:

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().

How do I get all iframe elements?

问题:

回答1:

回答2:

回答3:

收藏的人(0)

How do I get all iframe elements?

问题:

回答1:

回答2:

回答3:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮