Как получить все элементы iframe? - PullRequest
Новая
       4

Как получить все элементы iframe?

12 голосов
/ 23 сентября 2010

Я показываю индикатор загрузки, в то время как некоторые внешние фреймы загружаются с помощью следующего кода: 

<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 с регулярным выражением, например:

  • loading_iframe1
  • loading_iframe2
  • loading_iframe3

Ответы [ 3 ]

15 голосов
/ 23 сентября 2010

Сначала теги <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, и вы можете легко получить доступ к соответствующему div, изменив идентификатор на +"-L"

Чтобы получить все элементы 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 = "";
    }
}
8 голосов
/ 23 сентября 2010

Использование простого ванильного JavaScript: при условии, что функция loading_iframe выполняет одно и то же действие для каждого iframe, вы можете создать массив, содержащий идентификаторы всех iframe, а затем перебрать этот массив.*

Кроме того, эта версия load_iframes будет работать, если в идентификаторах iframe будет порядковый номер, начиная с 1 и заканчивая 50, и вам не нужно указывать все свои идентификаторы iframe вмассив: 

function load_iframes() {
    num_iframes = 50;
    for (i = 1; i <= num_iframes; i++) {
        loading_iframe("loading_iframe" + i);
    }
}

Использование jQuery: дать всем фрейм-фреймам CSS-класс, такой как loading_iframe.Затем вы можете использовать jQuery для выбора всех элементов, которые имеют класс loading_iframe.

1 голос
/ 23 сентября 2010

Просто добавлю к ответу Джеффа: я действительно рекомендую вам проверить jQuery. Это очень мощная задача, и такая задача должна быть довольно простой. Учитывая, что вы присваиваете каждому iFrame класс «loading_iframe», вы можете сделать что-то вроде: 

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

Вызов console.log () предполагает, что вы используете FireBug в Firefox или Google Chrome. Не уверен, что это работает в других браузерах.

Также см. Документ для .each () .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...