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

#javascript #iframe

Вопрос:

Когда у вас есть цикл по всем фреймам на странице, подобной этой:

HTML:

 <ul>
    <li id="a"><iframe src="..." /></li>
    <li id="b"><iframe src="..." /></li>
    <li id="c"><iframe src="..." /></li>
</ul>

JS:

     for (var i = 0;  i < window.frames.length;  i  ) {
        if (window.frames[i].getName() == selector) {
            frame_item = ????
            break;
        }
    }

Как я могу получить элемент DOM для <iframe> ? Или, следуя примеру, как я могу получить идентификатор для элемента <li> внутри цикла?

Ответ №1:

ОБНОВЛЕННЫЙ ответ.

window.frames ссылается непосредственно на контекст IFRAME (объект window iframe). AFAIK вы не можете получить объект IFRAME таким образом. Вы можете получить доступ к переменным IFRAME через window.frames[0].myVar .

Чтобы получить все узлы / объекты IFRAME, используйте:

 var iframes = document.getElementsByTagName('iframe'); //all iframes on page
for(var i=0; i<iframes.length; i  ){
    alert(iframes[i].parentNode.id); // LI.id
    alert(iframes[i].contentWindow.myVar); //iframe's context
}

В качестве альтернативы вы можете назначить идентификатор элементу UL и

 var ul = document.getElementById('ul_id');
var iframes = ul.getElementsByTagName('iframe'); //all iframes in UL
...

1. window.frames[i].Родительский узел не определен (Chrome)

2. Извините, я виноват. он ссылается непосредственно на контекст iframe. Смотрите обновленный ответ.

3. Та же проблема, что и с ответом Алекса Томаса: я должен вызвать функцию javascript для дочернего iframe. Я не могу доверять дочерней структуре DOM или контейнеру.

4. Вам не обязательно доверять структуре DOM. document.getElementsByTagName является DOM-эквивалентом window.frames. Вы получите объект DOM (IFRAME) для работы или cotnentWindow для вызова его функций. Другой случай — получить идентификатор LIs, если вы не знаете структуру, но вы все равно можете перебирать родительские элементы, чтобы найти конкретный элемент.

Ответ №2:

Для получения элементов из iframe с помощью jquery:

$("iframe_id_or_class").contents().find(*element*)

Обновить

 $("ul li").each(function(){
      $("iframe", this).contents().find(*element*);
});

1. jQuery тоже? Хороший звонок моему другу 😉

2. Хорошо, это идеально, но вопрос не в этом 🙂 Мне нужно получить доступ к контексту фрейма из цикла.

3. Это нормально, если вы знаете структуру DOM во внутреннем iframe, но у меня есть доступ только к функциям (стандартный API внутри любого iframe)

Ответ №3:

Я бы НАСТОЯТЕЛЬНО рекомендовал использовать библиотеку jQuery Javascript для написания Javascript в целом, поскольку это упрощает все, но ОСОБЕННО для селекторов, поскольку вы можете использовать селекторы CSS. Итак, в этом случае вы бы использовали

 var id = [];

$("ul li").each(function(){
      id.push($(this).attr("id"));
});

Редактировать

Это то, что вам нужно?

 $("iframe").each(
    function(){
         if($(this).attr("name")==desired_name)
             alert($(this).parent());
    }
);

1. Я использую Jquery, но я упростил проблему здесь до простого кода javascript 🙂 Проблема здесь не в селекторах, а в том, чтобы получить идентификатор внутри этого цикла.

2. этот цикл помещает идентификатор каждого li из них в id массив