Get element value inside iframe which is nested inside Frame in javascript?

Question

I main php page in which there are 2 frames. Inside the second frame there is iframe. I want to access value of element on iframe document from the 1st frame.

I tried like this:

var frame1 = parent.frames[1];
var frame2 = frame1.document.getElementsByTagName('iframe')[0];
var eleValue =frame2.contentWindow.document.getElementById("MyElement").value;

but I am not receiving any value though it is there.

var frame1 = parent.frames[1];
alert(frame1.name);
var frame2 = frame1.document.getElementsByTagName('iframe')[0];
alert(frame2.name);
var txtClinic = frame1.document.getElementsByTagName('iframe')[0].contentDocument.getElementById("clinicFlag");

last line of code doesnot return any control object.

Answer 1

Here's a modified snippet of my answer linked in a comment. Function returns the window object of an (i)frame with id passed (id), or null, if the (i)frame is not found. This method works only, if all the (i)frames are in the same domain. Also ids given to (i)frame elements must be unique throughout all documents involved in the window structure.

function searchFrame(id) {                                     // id = the id of the wanted (i)frame
    var result = null,                                         // Stores the result
        search = function (iframes) {                          // Recursively called function
            var n;                                             // General loop counter
            for (n = 0; n < iframes.length; n++) {             // Iterate through all passed windows in (i)frames
                if (iframes[n].frameElement.id = id) {         // Check the id of the (i)frame
                    result = iframes[n];                       // If found the wanted id, store the window to result
                }
                if (!result && iframes[n].frames.length > 0) { // Check if result not found and current window has (i)frames
                    search(iframes[n].frames);                 // Call search again, pass the windows in current window
                }
            }
        };
    search(window.top.frames);                                  // Start searching from the topmost window
    return result;                                              // Returns the wanted window if found, null otherwise
}

This function can find a frame or iframe with the passed id regardless where it is placed in the window structure. Also the function can be placed and called in any window. I'd put this to the main page (as global). If the method is needed in subwindows, just call with top.searchFrame(...).

Instead of ids, also names can be used, as long as they are also unique. In that case the id check in searchFrame() needs to be edited to name check.

In your case, first you need to give an id to the target iframe, then you can use the code for example like this:

var txtClinic = searchFrame('IFRAME_ID').document.getElementById('clinicFlag');

---

The method above might be a bit overkilling to get a single reference, but it's very helpful, if you have to get these cross-window references multiple times within different windows.

The specific task of yours could be done like this:

var txtClinic = parent.frames[1].frames[0].document.getElementById('clinicFlag');

---

names of the (i)frame are also handy to use with frames collection. Instead indices you can use names. Just always chain the reference starting from the main page, i.e. from top. For example:

var iframeWin = top.frames['frame2'].frames['iframe1'];

---

Useful reading:

window.top
window.frameElement
window.frames