Home > Developer > JavaScript
Implement more complex interactions with JavaScript
First, what is the framework
The main function of frame frames is "split" window, so that each "small window" can display different htm l files, different frameworks can interact (interact), which means that different frameworks can exchange information and data. For example, suppose you open two frames, the first frame displays the catalog of the book, and the second frame displays the contents of the chapter.
The framework can split the screen into different regions, each with its own URL, to achieve access to different frameworks through the frames[] array object. In fact, the frame object itself is a kind of window that inherits all the characteristics of the Window object and owns all the properties and methods. Let's take a look at the example of the framework first. See Figure 9-1 below.
Figure 9-1 Frame Objects
<HTML>
<HEAD>
</HEAD>
<frameset rows= "20%,80%" >
<frame src= "test9_1.html" >
<frameset cols= "50%,50%" >
<frame src= "test9_2.html" >
<frame src= "test9_3.html" >
</Frameset>
</Frameset>
</HTML>
The above HTML logo divides the screen into three frames. The window is divided into two behavior units and then divided into two windows. and put your own HTML document in the appropriate frame.
Tell the browser by [Framset] that you want to set up several frames; rows This parameter tells the browser that you want to split the window into columns, and cols This argument tells the browser that you want to split the window into rows.
You can use many groups of <frameset...> tags to split the window more complex.
You can give each frame a "first name" (name). The name of the frame is important in JavaScript syntax. You can use <src> to tell the browser which HTML file you want to load.
Ii. How to access the framework
We have previously described using document.forms[to implement access to different elements of a single form. To implement access to different elements of multiple forms in a frame, you must use the Frames property in the Window object. The Frames property is also an array, and he has one item for each child frame in the parent frameset. Access to different frameworks through subscript:
PARENT.FRAMES[INDEX1].DOCUEMENT.FORMS[INDEX2]
Determine the number of forms in the window by Parent.frames.length. In addition to using an array subscript to access a form, you can also use the frame name and form name to achieve an interview for each element:
Parent.framesName.decument.formNames.elementName. (m/p)
Iii. examples
Here's a concrete example to illustrate the use of JavaScript scripts to implement more complex information interactions on the web. This example is to implement the dynamic interaction of form information in a multiple window, in which the first three windows in the browser window are made for form interaction, and each form window implements the dynamic interaction of different information.
Tset9.html the main calling document it first divides the window into a two-row form, and then divides the second row into a form with two columns;
Test9-1.html for display title document;
Test9_2.html for the second framework document one of the things you should be aware of:
Through JavaScript script, the "Yunnan province" and "Sichuan province" are changed into "Kunming" and "Chengdu City" respectively.
Test7_3.html is the third framework document.
Keynote document
The main role is to divide the window into a two-line form, and then divide the second row into forms with two columns.
Test9.htm
<HTML>
<HEAD>
</HEAD>
<frameset rows= "10%,90%" >
<frame src= "Test9_1.htm" >
<frameset cols= "40%,60%" >
<frame src= "Test9_2.htm" >
<frame src= "Test9_3.htm" >
</Frameset>
</Frameset>
</HTML>
First frame
The main function is to display the title document.
Test9_1.htm
<HTML>
<HEAD>
</HEAD>
<H2> use framework to implement web interaction </H2>
</HTML>
A second framework
The primary role is to implement the interaction. You can use the JavaScript script to change the "Yunnan province" and "Sichuan province" to "Kunming" and "Chengdu City" respectively.
Test9_2.htm
<HTML>
<HEAD>
</HEAD>
<Body>
<form name= "Test9_1" >
Please select City:<br>
<select name= "Select1" multiple>
<Option> Yunnan Province
<Option> Sichuan Province
<Option> Guizhou Province
<Option> Shandong Province
<Option> Jiangsu Province
<Option> Zhejiang Province
<Option> Anhui Province
<Option> Henan Province
</select><BR>
<HR>
<input type= "Submit" Name= "" value= "submitted" >
<input type= "reset" name= "" value= "reset" >
</Form>
<pre>
<script language= "JavaScript" >
document.test9_1.elements[0].options[0].text= "Kunming";
document.test9_1.elements[0].options[1].text= "Chengdu City";
</script>
</pre>
</Body>
</HTML>
Figure 9-2 results in the browser
This lecture introduces the main features and uses of the basic elements in the framework, and the use of JavaScript scripts makes it easy and flexible to implement more complex information interactions on Web pages, which is not available in the HTML markup language. You can see how JavaScript attracts a lot of web designers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
