When you have a loop through all iframes in a page like this:

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

How can I get the DOM element for the < iframe>? Or following the example, how can I get the ID for the < li> item inside the loop?

When you have a loop through all iframes in a page like this:

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

How can I get the DOM element for the < iframe>? Or following the example, how can I get the ID for the < li> item inside the loop?

• javascript
• iframe

Share Follow edited Dec 3, 2012 at 21:00 James A Mohler 11.1k1515 gold badges5050 silver badges7676 bronze badges asked Oct 7, 2011 at 10:17 IvanIvan 16k1818 gold badges6363 silver badges9999 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

UPDATED answer.

window.frames references directly to the IFRAME context (iframe's window object). AFAIK you cannot obtain IFRAME object by this way. You can access IFRAME's variables via window.frames[0].myVar.

To get all IFRAME node/objects use:

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
}

Alternatively you can assign id to UL element and

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

To get elements from within an iframe using jquery:

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

Update

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

I would STRONGLY suggest using the JQuery Javascript library for writing Javascript in general as it makes the whole thing easier, but ESPECIALLY for selectors as you can use CSS selectors. So in this case you would use

var id = [];

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

EDIT

Is this what you require?

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