Get element value inside iframe which is nested inside Frame in javascript?
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.
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)frame
s are in the same domain. Also id
s 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 id
s, also name
s 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');
name
s 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