Working around text fields that are iFrames

Some websites may contain what appears to be a text area field, but is really an iFrame that is modified as the user types in content. In such a case, the body of the iFrame is modified and the text becomes the innerHTML.

Before you begin

You must be able to do the following:

  • Properly locate and identify page frames and elements and determine if an element fits this use case.

  • Properly reference and modify DOM elements using JavaScript.


Record the script.

Make a note of which actions are recorded when typing into the iFrame element.

Play back the script to make sure it finishes successfully.

In the timeline, select one of the actions recorded for the iFrame interaction. Note the Target Window for the action. This information is required for the customization.

Click action in an iFrame interaction

Delete the actions  recorded for the iFrame interaction, but leave the step boundary.

Step 5 - actions deleted

Insert a Custom action in place of the elements you just removed.

Set the target to the Target Window identified in Step 2.

Custom action for iFrame interaction

In the Code area, write a JavaScript action that modifies the innerHTML of the body to contain the text value that must be typed into the field. See the sample code below.

Play back the script to verify that the Custom action works.

Sample code

The following sample code was used to work around a text iFrame within a Cisco application that uses Clearspace. This custom code is executed within the target frame scope. Most use cases will require code similar to this.

 /* Access the body of the iFrame and change its innerHTML to the message to be typed in
the text field */