Suppose you have an HTML page whose elements are embedded in a frame, how would you select them. For Example, assume that you have a page with following structure:
<html>
Welcome
<hr>
<frameset rows=”50%,50%”>
<frame id=”frame1″ src=”frame1.html” name=”frame1″/>
<frame id=”frame2″ src=”frame2.html”name=”frame2″/>
</frameset>
</html>
The contents of frame1.html are :
<html>
<body>
<input id=”frame1Text” type=”text”/>
</br>
</p>
</body>
</html>
Now suppose you want to select the text box in frame1 using javascript. There are following ways by which this can be done :
Method 1 : Fetching element directly inside the frame
Fetch the frame using frames
property of window
object. frames
property returns an array of all frames inside the current window. A frame can then be accessed by using its index or by its name.
var element = window.frames[‘frame1’].document.getElementsByName(‘frame1Text’);
The above one-liner can also be written in multiple lines as :
var frame = window.frames[‘frame1’];
var documentObj = frame.document;
var element = documentObj.getElementsByName(‘frame1Text’);
If you know the index or its position of a frame then it can also be accessed as window.frames[0];
. Index is 0-based.
Note : frames
property will also return all iframes
inside a window
object. Also, <frame> elements are not supported in HTML5.
Method 2 : Using contentWindow property
Fetch the frame by its id or name and use its contentWindow
property to get the document object associated with this frame. contentWindow
property has a document
property which returns the document object for the selected frame. Using this document object, you can easily play around with the elements inside it.
var element = document.getElementById(‘myframe1’).contentWindow.document.getElementById(‘frame1Text’)
For understanding purpose, the above line can be broken into :
var frame = document.getElementById(‘myframe1’);
var documentObj = frame.contentWindow.document;
var element = documentObj.getElementById(‘frame1Text’);
Method 3 : Using contentDocument property
A frame object has a contentDocument
property which directly returns the document associated to that frame. Using this document object, you can easily play around with the elements inside it.
contentDocument
is a short way of getting a frame’s document object in comparison to contentWindow
. Thus,
⇒ contentDocument
is equivalent to contentWindow.document
The syntax to get an element with “frame1Text” inside a frame with id “myframe1” is :
var element = document.getElementById(‘myframe1’).contentDocument.getElementById(‘frame1Text’)
Again, for understanding, the above line can be expanded to :
var frame = document.getElementById(‘myframe1’);
var documentObj = frame.contentDocument;
var element = documentObj.getElementById(‘frame1Text’);
Summing up all the three methods, once you get the frame
object, you need to get its document
object. This can be done in three ways : directly using document
property of frame
object, via contentWindow
property of frame
object or by contentDocument
property of document
object.
Let’s tweak in :
- You can also fetch a frame by its name using
getElementsByName
method ofdocument
object. This method returns a collection since more than one element can have the same name on a page. Thus for interacting with the desired element, its index should also be used after the method asdocument.getElementsByName("frame1")[0]
. Index is 0-based. document
object is the root node of an HTML document.- When we say a frame’s document, it means the root of frame since a frame is also an independent HTML document.
None of them works and i dont have any clue