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

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

Leave a Reply

Mark Your Impression

  Subscribe  
Notify of
Close Menu

Never Miss an article !

Get the new post delivered straight into your inbox, enter your email and hit the button

You have successfully subscribed to the newsletter

There was an error while trying to send your request. Please try again.

codippa will use the information you provide on this form to be in touch with you and to provide updates and marketing.