How to select an element inside a frame using javascript / Various ways to select an element inside a frame using javascript

On:

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 :

  1. You can also fetch a frame by its name using getElementsByName method of document 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 as document.getElementsByName("frame1")[0]. Index is 0-based.
  2. document object is the root node of an HTML document.
  3. When we say a frame’s document, it means the root of frame since a frame is also an independent HTML document.

1 Comment

Leave a Reply