javascript - How do I get all iframe elements?

Question

Welcome To Ask or Share your Answers For Others

javascript - How do I get all iframe elements?

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - How do I get all iframe elements?

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-23T19:16:31+0000

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

Categories

javascript - How do I get all iframe elements?

javascript - How do I get all iframe elements?

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags