How to access to iframe element?

Question

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?

Answer 1

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

Answer 2

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

Answer 3

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