DevGuru Knowledge Base Articles

Quick References

Features

Partners


			A100224:Scripting with Frames. This article explains how to use frames and scripts to enable one frame to control what happens in another frame, and to access the object model contained in another frame. We will examine each of the following tasks: 1. How to reference a form element in another frame. 2. How to submit a form in or to another frame. 3. How to call a function in another frame. It is assumed the reader is familiar with the window and document objects. If not, please refer to the DevGuru JavaScript Quick Reference. Here is a simple HTML frameset code example. Remember that you do not use the HTML <body>...</body> tags when using <frameset>...</frameset> and that the <frame> tag is not closed (i.e., no </frame>). <html> <frameset cols="50%, "> <frame src="Entry.html" name="frame1"> <frame src="Results.html" name="frame2"> </frameset> </html> Task 1: How to Reference a Form Element in Another Frame.* JavaScript presents an HTML page as a hierarchy of objects with the document object at the root. In addition, the document object has an associated window object which represents the browser, or portion of the browser, in which the document is displayed. In a page that contains frames, each frame has an associated window object. These window objects are stored in a hierarchy that reflects the layout of the frames and framesets. The parent of a frame is referenced with the window.parent property. A child frame, for example named "child1", is referenced either using the window.frames array, window.frames["child1"] or directly as a property of the parent, window.child1 For example, assume you have two sibling frames, frame1 and frame2. Code in frame1 can reference the document object of the HTML page being displayed in frame2 with: window.parent.frame2.document Having gained access to the document object of frame2, we can then access the value of a form element (named input1) in a form (named form1) in this document using the standard object hierarchy as below: window.parent.frame2.document.form1.input1.value Task 2: How to Submit a Form to/in Another Frame. If you have a form in one frame and you wish to load the page that the form submits to into a different frame, you can set the target attribute of the form tag to the name of the frame in which you wish to display the results. For example if the following form were in a document being displayed in a frame named frame1, when submitted, the output generated by results.asp would be displayed in frame2, and the contents of frame1 would remain unchanged: <FORM name= "frmResults" target="frame2" method="post" action="Results.asp"> You can also use script to submit a form that is in a frame other than the one in which the script is running. To achieve this, we simply use the document object model as in Task 1. The following code, which could be in a frame named frame1, causes a form named form1 in frame2 to be submitted: window.parent.frame2.document.form1.submit() Task 3: How to Call a Function in Another Frame. To call a function that is defined in code embedded in a page that is displayed in a different frame, we simply use the window object hierarchy as described in the previous two examples. The following code, which might be in a page in a frame called frame1, calls the JavaScript function MyFunction, which is in a page being displayed in a frame called frame2: window.parent.frame2.MyFunction() Demonstration. To see these concepts being applied, please visit this demonstration page. The Guru