| Table of Contents | Previous Next |
8.2 Controlling frames II8.2.1 Creating a dynamic advertising strip with framesYou may have noticed that almost all tobacco advertisements have an additional small strip at the bottom to state something like "Smoking May Damage Your Health." In practice, an advertising strip on the Web can be anything like simple text output, animated images, and movie clips. This strip is attached to many of your pages at run time. Only one copy of the strip page is needed and it can be updated on a daily basis. As a simple example we want to add a small strip at the top of each page (dynamically). The strip is, in fact, the text message "Please Protect Wild Life!" First, you need to collect a small library of wild life images. For each picture, a page is developed to display it. At the very top of these pages, a small piece of script is used to add the strip. For example, our first image page wild01.htm is listed below. Example: wild01.htm - A Testing Wild Life Page For ex08-05.htm 1: <?xml version="1.0" encoding="UTF8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head><title>File: wild01.htm </title></head> 6: <script> 7: if (window.top.location == window.self.location) 8: window.top.location.href ="ex0805.htm?wild01.htm" 9: </script> 10: <body style="background:#000088;text-align:center"> 11: <img src="01_img.jpg"> 12: </body> 13: </html> The body part of this page is a single statement to display a document containing an image, 01_img.jpg. The script (lines 78) is used to compare the window level. If the current window is at the top level, the following statement is executed: window.top.location.href ="ex0805.htm?wild01.htm" This statement not only assigns the top window a page ex08-05.htm, but also sends an argument wild01.htm along with it. The master frame page ex08-05.htm identifies this argument and sends the page wild01.htm into a frame. The master frame page is listed in ex08-05.htm.
Example: ex08-05.htm - A Page To Protect Wild Life
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title> A Page To Protect Wild Life ex0805.htm</title></head>
6: <script>
7: window.resizeTo(800,660)
8: lPage="wild01.htm"
9: if (location.href !="")
10: {
11: hrefSt=location.href
12: if (hrefSt.indexOf('?') !=-1)
13: lPage=hrefSt.substring(hrefSt.indexOf('?')+1,hrefSt.length)
14: }
15: document.writeln('<frameset rows="40,*" frameborder="0" border="0" >')
16: document.writeln('<frame src="top05.htm" name="top" id="top"'+
17: 'scrolling="no" frameborder="0" noresize="noresize" />')
18: document.writeln('<frame src="'+lPage+'" name="low" id="low" '+
19: 'scrolling="no" frameborder="0" noresize="noresize" />')
20: document.writeln('<\/frameset>')
21:
22: </script>
23: </html>
The important part of this page is lines 914. Remember that the location.href property carries the whole URL (or http:) input. This location string is used to test for an empty input. If this string is not empty, another test is activated to see whether this string contains any "?" symbol (line 12). If a "?" symbol is detected, the file after that symbol is copied to variable lPage (line 13). The output statements in lines 1520 generate a dynamic frame at run time. In terms of this example, the frame setting is
<frameset rows="40,*" frameborder="0" border="0" >
<frame src="top05.htm" name="top" id="top"
scrolling="no" frameborder="0" noresize="noresize" />
<frame src="wild01.htm" name="low" id="low"
scrolling="no" frameborder="0" noresize="noresize" />
</frameset>
This puts the page wild01.htm into the lower part of the screen. The upper part is the strip page top05.htm. We turn off all frame attributes because we want the two frames to be fully integrated together. The strip page top05.htm is listed as follows:
Example: top05.htm - The Top Page For ex08-05.htm
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>File top05.htm </title></head>
6: <style> .mSt{font-family:arial;font-size:14pt;height:25px}</style>
7: <script>
8: if (window.top.location == window.self.location)
9: window.top.location.href ="ex0805.htm"
10: </script>
11: <body style="background:#000088;color:#ffff00;text-align:center">
12: <div class="mSt">Please Protect Wild Life !</div>
13: </body>
14: </html>
As you can see, this is a very simple page containing one conditional if statement in lines 89. The if statement indicates that any direct call for this page will result in a redirection to the frame page ex08-05.htm. If you issue the command
the two pages top05.htm and wild01.htm will be combined together as one page. A screen shot of this example is shown in Fig. 8.7. To complete this example, eight wild life pages from wild01.htm through wild08.htm are prepared. The following command will display the pages top05.htm and wild06.htm together (see Fig. 8.8):
Figure 8.7. ex08-05.htm
Figure 8.8. wild06.htm
The page top05.htm in this example is like an advertising strip page on top of each wild life picture and can be changed easily without touching other pages and pictures. Also, this strip page can be anything, including sound and pictures on the Web. These advantages make it a desirable technique to satisfy many advertising needs. Many commercial Web sites use similar techniques to create small frames (advertising areas) solely for advertising purposes. 8.2.2 Frame structure and access modelIn example ex08-02.htm, we demonstrated how to store data in the master frame page and share them among child frames. In fact, data and (script) functions can be stored in any child frame and shared with others. Before we discuss how functions and data are shared among frames, we need to understand some basic frame structures (from a programming point of view) and how to work with them. Consider the master frame file ex08-06.htm: Example: ex08-06.htm - Frame Structure And Access Model 1: <?xml version="1.0" encoding="UTF-8"?> 2: <!DOCTYPE html 3: PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 4: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 5: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 6: <head> 7: <title> Frame Structure and Access Model ex0806.htm</title> 8: </head> 9: <script>window.resizeTo(650,500)</script> 10: <frameset cols="30%,*"> 11: <frameset rows="40%,*"> 12: <frame src="left06a.htm" id="left_fa" name="left_fa" /> 13: <frame src="left06b.htm" id="left_fb" name="left_fb" /> 14: </frameset> 15: <frameset rows="30%,*"> 16: <frame src="right06a.htm" id="right_fa" name="right_fa" /> 17: <frame src="right06b.htm" id="right_fb" name="right_fb" /> 18: </frameset> 19: </frameset> 20: </html> This file divides the screen into four parts and assigns each part to a page. The way that we order the frames is important. In this case, the frames and their associated pages are arranged as left06a.htm, left06b.htm, right06a.htm, and right06b.htm. In terms of the "Access Model," a 2 x 2 table of frames is defined and pages can be accessed via the model convention as given in Table 8.1.
With this model in mind, you can now write a page, e.g., right06b.htm, to access properties of other pages through frames. Let's take a look at the listing of right06b.htm:
Example: right06b.htm - The Right Bottom Page For ex08-06.htm
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html
3: PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
4: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
6: <head><title>File: right06b.htm</title></head>
7: <style>
8: h3{font-family:arial;font-size:12pt;color:#ffff00}
9: </style>
10: <body style="background:#000088">
11: <h3>This Is The Right Frame Second Row<br />
12: File: right06b.htm<br /><br />
13: Frame Access Model<br /></h3>
14: <script>
15: document.write("<h3>top.document.Title= "+
16: top.document.title+"<br />")
17:
18: document.write("top.frames[0].document.title= "+
19: top.frames[0].document.title + "<br />")
20: document.write("top.frames[1].document.title= "+
21: top.frames[1].document.title + "<br />")
22:
23: document.write("top.frames[2].document.title= "+
24: top.frames[2].document.title + "<br />")
25: document.write("top.frames[3].document.title= "+
26: top.frames[3].document.title + "<br /></h3>")
27: </script>
28: </body>
29: </html>
This page uses the frame model to access properties of all other pages. For example, line 18 is used to print out the title of top.frames[0], i.e., the title of page left06a.htm. This page left06a.htm is listed below. The screen shot of this example is shown in Fig. 8.9.
Example: left06a.htm - The Left Top Page For ex08-06.htm
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>File: left06a.htm</title></head>
6: <style> h3{font-family:arial;font-size:12pt;color:#ffff00} </style>
7: <body style="background:#000088">
8: <h3>This Is The Left Frame First Row<br />
9: File: left06a.htm</h3>
10: </body>
11: </html>
Figure 8.9. ex08-06.htm
Some browsers such as NS6 do not assign a value to the top.frames[ ] array until that particular frame is loaded. This is why we have chosen to print the output in the last frame file right06b.htm. 8.2.3 Sharing data and functions among framesFor frame applications, the ability to allow function calling, data sharing, and communication among frames presents state-of-the-art challenges to Web programmers. To address these issues, some fundamental program design concepts are needed. Examples may be the best way to demonstrate these concepts. Consider the following master frame page ex08-07.htm: Example: ex08-07.htm - Sharing Data And Functions With Frames 1: <?xml version="1.0" encoding="UTF-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head><title> Sharing Data And Functions ex0807.htm </title></head> 6: <script> window.resizeTo(550,400)</script> 7: <frameset cols="30%,*"> 8: <frameset rows="70%,*"> 9: <frame src="left07a.htm" id="left_f1" name="left_f1" /> 10: <frame src="left07b.htm" id="left_f2" name="left_f2" /> 11: </frameset> 12: <frame src="right07a.htm" id="right_f" name="right_f" /> 13: </frameset> 14: </html> There are three frames in this page, left07a.htm (line 9), left07b.htm (line 10), and (line 12). The first page, left07a.htm, contains some data, a function, and a menu:
Example: left07a.htm - The Left Page For ex08-07.htm
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>File: left07a.htm </title>
6: <style> .mSt{font-family:arial;font-size:16pt;border:0;
7: background:#000088;font-weight:bold;color:#ffff00}
8: </style>
9: <script>
10: var aCount=0
11: var bCount=0
12: var cCount=0
13: var pPage="Page A"
14: var cPage="Page A"
15: function backgroundText(varSt,varC)
16: {
17: top.frames[varC].document.write('<div style="font-family:arial;'+
18: 'font-size:12pt;color:#666600;position:absolute;top:0px">')
19: for(i=0;i<40;i++)
20: top.frames[varC].document.write(varSt)
21: top.frames[varC].document.write("</div>")
22: }
23: </script>
24: </head>
25:
26: <body style="background:#000088;text-align:center">
27: <div class="mSt" style="color:#00ffff">Company I<br /><br /></div>
28: <input type="button" onclick="pPage=cPage;cPage='Page A';
29: parent.left_f2.location.href='left07b.htm'
30: parent.right_f.location.href='right07a.htm'"
31: onmouseover="this.style.background='#008800'" value="Page A"
32: onmouseout="this.style.background='#000088'" class="mSt" /><br />
33: <input type="button" onclick="pPage=cPage;cPage='Page B';
34: parent.left_f2.location.href='left07b.htm'
35: parent.right_f.location.href='right07b.htm'"
36: onmouseover="this.style.background='#008800'" value="Page B"
37: onmouseout="this.style.background='#000088'" class="mSt" /><br />
38: <input type="button" onclick="pPage=cPage;cPage='Page C';
39: parent.left_f2.location.href='left07b.htm'
40: parent.right_f.location.href='right07c.htm'"
41: onmouseover="this.style.background='#008800'" value="Page C"
42: onmouseout="this.style.background='#000088'" class="mSt" /><br />
43: </body>
44: </html>
In this page, three buttons are used to simulate three menu items: "Page A," "Page B," and "Page C" (lines 28, 33, and 38). The corresponding pages of the items in the right frame are right07a.htm, right07b.htm, and right07c.htm respectively. When, for example, "Page A" is pressed (lines 2832), left07b.htm and right07a.htm will be sent to the left bottom and right frames respectively (see lines 2930). Also, when "Page A" is pressed, the following statement is executed (see line 28): pPage=cPage;cPage="Page A" The first part of this statement stores the current page (cPage) in the previous page variable pPage and puts the string "Page A" into the current page variable cPage. These two variables are declared in lines 1314 and are used to remember the item that we have selected. In lines 1012, the three variables aCount, bCount, and cCount are defined. They are used to count the number of times that visitors have visited the frames and pages. The function backgroundText() declared in lines 1522 is also available for the use of other frames. This function takes two arguments, varSt (a string variable) and varC (a channel variable), and generates a background text in the calling frame. Consider the right page right07a.htm:
Example: right07a.htm - The Right Page For ex08-07.htm
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title> File : right07a.htm </title>
6: <style>
7: h3{font-family:arial;font-size:22pt;font-weight:bold;
8: position:absolute;top:20px;left:10px}
9: </style>
10: <script>
11: parent.left_f1.aCount++
12: parent.left_f1.backgroundText("T h i s i s P a g e A ",2)
13: </script>
14: </head>
15: <body style="background:#000088">
16: <h3 style="color:#ffff00">
17: This Is Page A<br /><br />
18: You Have Visited Us <br />
19: <script>document.write(parent.left_f1.aCount)</script> Times</h3>
20: </body>
21: </html>
When this page is loaded, it increases the counting (aCount) in the top left frame location parent.left_f1 (line 11). Next, it calls the function backgroundText() to generate a background text (line 12). The integer argument at the end of line 12 is the channel variable to specify the right frame (i.e., top.frames[2]). Finally, the script in line 19 outputs the number of visits to the screen. The left bottom page left07b.htm is relatively simple and is listed below: Example: left07b.htm - The Left Bottom Page For ex08-07.htm 1: <?xml version="1.0" encoding="iso-88591"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head><title>File: left07b.htm </title></head> 6: <body style="background:#000088;color:#ffff00; 7: font-size:12pt;font-family:arial;font-weight:bold"> 8: You Previously<br /> Pressed 9: <script> document.write(parent.left_f1.pPage) </script> 10: </body> 11: </html> Line 9 is the only important statement in this page. It outputs the past page variable pPage from location parent.left_f1 to the screen. Figure 8.10 shows the screen shot of this example. Figure 8.10. ex08-07.htm
8.2.4 Sending information to frames interactivelyIn this section, we consider the task of getting information from a user and sending him or her to another "appropriate" frame. Getting information from a user will normally require form element (or form interface) design. This is an independent subject and a more detailed discussion follows in Part IV. The form interface used here is a simple one. It involves some text boxes, checkboxes, and a text area. First, a master frame page is defined as in ex08-08.htm. Example: ex08-08.htm - Send Data To Frame 1: <?xml version="1.0" encoding="UTF-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head><title> Send Data To Frame ex0808.htm </title></head> 6: <script> window.resizeTo(700,580)</script> 7: <frameset cols="40%,*"> 8: <frame src="left08.htm" id="left_f" name="left_f" /> 9: <frame src="right08.htm" id="right_f" name="right_f" /> 10: </frameset> 11: </html> The left frame left08.htm is our form interface. The input information is sent to the right frame right08.htm. To keep the process simple, we just want to get "Name," "Email," "Favorite Browsers," and "Comments" from the user. This XHTML form interface consists of two parts: the first part is to get some text input from the user.
Example: left08.htm - The Left Page For ex08-08.htm (Part One)
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title> File: left08.htm </title>
6: <style>
7: .mSt{font-family:arial;font-size:12pt;font-weight:bold}
8: .butSt{background-color:#aaffaa;font-family:arial;font-weight:bold;
9: font-size:12pt;color:#ff0000;width:180px;height:30px}
10: </style>
11: </head>
12: <body style="background:#000088;color:#ffff00">
13: <div class="mSt">Please Enter Your Information<br /><br />
14:
15: <table align="center">
16: <tr class="mSt"><td>Name:</td>
17: <td><input type="text" id="in1" name="in1"
18: value="John Smith" /></td></tr>
19: <tr class="mSt"><td>Email:</td>
20: <td><input type="text" id="in2" name="in2"
21: value="JohnSmith@isp.com" /></td></tr>
22: </table><br />
23:
This page contains a table and some <input> elements. After the text "Name" in line 16, we have an input element in line 17. The type of the input element is text which allows a user to type in his or her name. The second input element in lines 2021 is to get the "Email" address. The second part of this interface shows how to use checkboxes and text area to get user information. Listing Continuation Of The Page left08.htm (Part Two) 24: Favorite Browsers<br /><br /> 25: <table align="center"><tr class="mSt"> 26: <td><input type="checkbox" id="br1" name="br1" checked /> IE</td> 27: <td><input type="checkbox" id="br2" name="br2" checked /> NS</td></tr> 28: <tr class="mSt"> 29: <td><input type="checkbox" id="br3" name="br3" /> Others</td></tr> 30: </table><br /> 31: 32: Comments<br /><br /></div><div class="mSt" align="center"> 33: <textarea rows="5" cols="30" id="com1" name="com1"> 34: I support W3C standard browsers. 35: </textarea><br /><br /> 36: <input type="button" onclick="wPage()" value="Send Data" class="butSt" /> 37: </div> 38: This code fragment contains three checkboxes (lines 2629) for some favorite browsers: namely, "IE," "NS," and "Others." The IE and NS checkboxes are initially checked. The comment section (lines 3235) is a text area field. The size of this input field is set to five rows of 30 characters and has an initial value "I support W3C standard browsers." (line 34). In line 36, a button is used to activate a function called wPage() and send the input data to the right frame. The final part of this interface provides the definition of the function wPage().
Listing Continuation Of The Page left08.htm (Part Three)
39: <script>
40: brs = new Array(" ","IE","NS","Others")
41: function wPage()
42: {
43: lMsg="Name: "+document.getElementById("in1").value+"<br />"+
44: "Email: "+document.getElementById("in2").value+"<br />"+
45: "Favorite Browsers: "
46: for (i=1;i<4;i++)
47: {
48: varl = "br"+i
49: if (document.getElementById(varl).checked !=0)
50: lMsg = lMsg + brs[i]+"  "
51: }
52: lMsg = lMsg +"<br /><br />Comments: <br />"+
53: document.getElementById("com1").value
54: top.frames[1].document.getElementById("rMsg").innerHTML=lMsg
55: }
56: </script>
57: </body>
58: </html>
When the user presses the Send Data button, the function wPage() will be called and create a local string called lMsg to capture the input data for "Name" and "Email" (lines 4344). Next is a for-loop to check the checkboxes (lines 4651). We detect the checkboxes one by one. If a checkbox is checked, the corresponding browser name is added to the local string lMsg. Lines 5253 are used to add the information in the textarea to lMsg. Finally, in line 54, this lMsg is output to the right frame (i.e., top.frames[1]) as an innerHTML message to the location with an identity id=rMsg. Compared to the left frame, the right frame right08.htm has a simpler structure.
Example: right08.htm - The Right Page For ex08-08.htm
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>File: right08.htm</title></head>
6: <style>.mSt{font-family:arial;font-size:22pt;font-weight:bold}</style>
7: <body style="background:#000088">
8: <div class="mSt" style="color:#00ffff;text-align:center">
9: Personal Information<br /><br /><br /></div>
10: <div class="mSt" style="font-size:14pt;color:#ffff00"
11: id="rMsg" name="rMsg">
12: </div>
13: </body>
14: </html>
This page uses a division element <div> in lines 1011 with identity rMsg to accept an incoming data string. When the user presses the Send Data button, the left page information will be sent to this division element and appear in the right page. Some screen shots of this example are presented in Figs 8.11 and 8.12. Figure 8.11. ex08-08.htm
Figure 8.12. Send data to frame
8.2.5 Controlling iframesInline frames, or iframes, can be considered as sub-windows within an XHTML page. They have the power of frames and the flexibilities of an XHTML element. Since they are XHTML elements, you don't need to write any master frame page for them. In fact, they have attributes of both frames and elements. In the following example, we demonstrate how to embed two iframes in a page and swap them using a button. The main program (or page) has the following listing (ex08-09.htm):
Example: ex08-09.htm - Controlling Iframes
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title> Controlling Iframes ex0809.htm</title></head>
6: <style>
7: .butSt{background-color:#aaffaa;font-family:arial;font-weight:bold;
8: font-size:12pt;color:#ff0000;width:180px;height:30px}
9: </style>
10: <script>
11: window.resizeTo(680,630)
12: swapV=0
13: function swapFrames()
14: {
15: if (swapV ==0)
16: {
17: swapV=1
18: document.getElementById("if_b").src="iframe_a.htm"
19: document.getElementById("if_a").src="iframe_b.htm"
20: }
21: else
22: {
23: swapV=0
24: document.getElementById("if_b").src="iframe_b.htm"
25: document.getElementById("if_a").src="iframe_a.htm"
26: }
27: }
28: </script>
29: <body>
30: <div align="center">
31:
32: <iframe src="iframe_a.htm" width="250" height="410"
33: frameborder="0" noresize="noresize" scrolling="no"
34: id="if_a" name="if_a"></iframe>
35:
36:           
37:
38: <iframe src="iframe_b.htm" width="250" height="410"
39: frameborder="0" noresize="noresize" scrolling="no"
40: id="if_b" name="if_b"></iframe><br /><br />
41:
42: <input class="butSt" type="button"
43: onclick="swapFrames()" value="Swap Iframes">
44: </div>
45: </body>
46: </html>
The first main element of this page is lines 3234. This is an iframe with some basic attributes of both frame and XHTML elements. This iframe includes a page called iframe_a.htm. All attributes such as border, resize, and scrolling of this frame are off simply because we want this frame to be fully integrated into the master page. Another iframe is defined in lines 3840. Line 42 is a button used to swap the frames. The swap function swapFrames() is declared in lines 1327 and a variable swapV is used to control the swapping. If the value of swapV is 0, you exchange the iframe source files; if the value is not 0, you change them back. The iframe source file, e.g., iframe_a.htm, is itself a simple page and is listed below:
Example: iframe_a.htm - The Left Iframe Page For ex08-09.htm
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>File: iframe_a.htm </title><head>
6: <style> .mSt{font-family:arial;font-size:16pt;border:0;
7: font-weight:bold;color:#ffff00}
8: </style>
9: <body style="background:#000088;text-align:center">
10: <div class="mSt" style="font-size:22pt;color:#00ffff">
11: IFrame A<br /><br /></div>
12:
13: <table border="0" align="center">
14: <tr align="center">
15: <td><img src="ace.gif" alt="pic" /></td>
16: <td><img src="clubs.gif" alt="pic" /></td></tr>
17:
18: <tr align="center">
19: <td><br /><input type="button" value="Red"
20: style="width:76px;height:35px;font-family:arial;font-size:14pt"
21: onclick="document.body.style.backgroundColor='#aa0000'"></td>
22: <td><br /><input type="button" value="Blue"
23: style="width:76px;height:35px;font-family:arial;font-size:14pt"
24: onclick="document.body.style.backgroundColor='#000088'"></td></tr>
25:
26: <tr align="center"><td colspan=2><br />
27: <img src="chessa.gif" alt="pic" /></td></tr>
28: </table>
29: </body>
30: </html>
As you can see, this is mainly a table that consists of three rows. The first row (lines 1416) has two animated gif images. The second row (lines 1824) contains two buttons used to control the background color; you can change the background color within this iframe. The third row contains only one animated gif picture. The other iframe file, iframe_b.htm, has a similar structure. Some of the actions on screen are captured in Figs 8.13 and 8.14. Figure 8.13. ex08-09.htm
Figure 8.14. Swapping iframes
|
| Table of Contents | Previous Next |
