Приглашаем посетить
Грибоедов (griboedov.lit-info.ru)

8.3 Browser window(s) I

Table of Contents

Previous Next

8.3 Browser window(s) I

8.3.1 Opening single and multiple new window(s)

Browsers can interpret XHTML code and display them correctly on screen. They also provide a rich source for basic windows programming without the need for or understanding the use of compilers. From plain windows to fully functional Web browsing windows, from text files, XHTML pages, audio, and images to movie clips, all of them can be controlled with little effort. For example, the code



<script> window.open()</script>

opens a new browser window (empty window) immediately. The code



<script> window.open("http://www.microsoft.com")</script>

opens a browser window and loads the corresponding Web site (www.microsoft.com) into it. Basically, you can put any supported file format (e.g., images, audio, and movie clips) into the argument. For example, the code



<script> window.open("01_img.jpg")</script>

will open a window and display a jpg (or JPEG) picture. To open multiple new windows, more window.open commands are used. Consider the example in ex08-10.htm:



Example: ex08-10.htm - Open Multiple Browser Windows

 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>Open Multiple Windows  ex08-10.htm </title></head>
 6: <script>
 7:    window.open("01_img.jpg")
 8:    window.open("02_img.jpg")
 9:    window.open("03_img.jpg")
10:    window.open("04_img.jpg")
11:  </script>
12: <body></body>
13: </html>

Yes, you are right! This page opens four browser windows and displays four pictures immediately as shown in Fig. 8.15.

Figure 8.15. ex08-10.htm

graphics/08fig15.gif


Some Web sites are still practicing this technique in a nasty way by displaying many other sites without their owners' or users'consent.

8.3.2 Using the basic attributes of new window(s)

The window.open command used in our last example has a rich set of arguments to control the look (or skin) of the browser window. For example, the following code displays the pictures in plain window frames:



Example: ex08-11.htm - Browser Window With Attributes I

 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>Browser Window Attributes I  ex0811.htm </title></head>
 6: <script>
 7:
 8:   lookSt ="menubar=no,toolbar=no,location=no,status=no"
 9:
10:     window.open("01_img.jpg","Pic1",lookSt)
11:     window.open("02_img.jpg","Pic2",lookSt)
12:     window.open("03_img.jpg","Pic3",lookSt)
13:     window.open("04_img.jpg","Pic4",lookSt)
14:  </script>
15: <body></body>
16: </html>

The third argument of the window.open command (lines 1013) is used to control the "look" of the window. It is a long string with attribute settings. We use a string variable lookSt to describe attribute settings. If you turn off the menu bar, toolbar, location, and status as demonstrated in line 8, you will have plain windows as shown in Fig. 8.16. In practice, you could use the following attributes and settings:

Figure 8.16. ex08-11.htm

graphics/08fig16.gif


menu bar

scroll bar

location

status

toolbar

resizable

copy history

 


The second argument in window.open represents the identity of the newly opened window. For example, you can use four different window identities, Pic1, Pic2, Pic3, and Pic4, to represent four different windows. The next example shows how to use this feature to output any XHTML-supported file to the same window.



Example: ex08-12.htm - Browser Window With Attributes II

 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>Browser Window Attributes II  ex0812.htm</title></head>
 6: <style>
 7:  .mSt{font-family:arial;font-size:14pt;font-weight:bold;color:#ffff00}
 8:  .bSt{background-color:#aaffaa;font-family:arial;font-weight:bold;
 9:      font-size:12pt;color:#ff0000;width:120px;height:30px}
10: </style>
11:
12: <script>
13:  window.resizeTo(440,380)
14:
15:  xhtmlFile = Array(7)
16:  for (i=1;i<7;i++)
17:  {
18:    xhtmlFile[i]="0"+i+"_img.jpg"
19:  }
20:
21:  function sPage()
22:  {
23:   varL = document.getElementById("sel").selectedIndex
24:   imgSt = xhtmlFile[varL +1]
25:   titleSt="MyPic"
26:   lookSt="menubar=no,toolbar=no,location=no,resizable=yes"
27:   window.open(imgSt,titleSt,lookSt)
28:  }
29: </script>
30:
31: <body style="background:#000088;text-align:center">
32:  <div class="mSt">Show Picture To A Window</div>
33:  <br /> <br />
34:
35:  <table align="center"><tr><td>
36:    <select class="bSt" id="sel" name="sel">
37:     <option>Parrot</option>
38:     <option>Peacock</option>
39:     <option>Eagle</option>
40:     <option>Butterfly I</option>
41:     <option>Butterfly II</option>
42:     <option>Wild Duck</option>
43:    </select>&nbsp &nbsp
44:  </td><td>
45:   <input type="button" onclick="sPage()" value="Show Pic" class="bSt" />
46:  </td></tr></table>
47:
48: </body>
49: </html>

Example ex08-12.htm can be used as a general program to send any XHTML-supported file to a browser window. An array xhtmlFile (see line 15) is used to remember all the picture files that we want to send. In this case, the picture files are 01_img.jpg, 02_img.jpg, … , 06_img.jpg as indicated in the for-loop in lines 1618.

The main body is a simple combo (or listed) box declared in lines 3643. Inside the box, six objects, Parrot, Peacock, …, Wild Duck, are used to associate with the image files 01_img.jpg, 02_img.jpg, … 06_img.jpg respectively. If the user picks the item "Parrot," the page displays the corresponding picture file 01_img.jpg in a separate window.

The script function sPage() (see lines 2128) is executed once the Show Pic button (line 45) is pressed. The selected object in the listed box is returned by the integer variable selectedIndex. That is, if you select the first item, the selectedIndex will have the value 0. This variable is used in line 23. Since variable selectedIndex is an integer starting from 0, you need to add 1 to reflect the true identity of the corresponding picture file (line 24). The image string variable imgSt together with the title string titleSt (line 25) and the look string lookSt (line 26) is used to open a new window and display the image. Some of the screen shots are displayed in Figs 8.17 and 8.18.

Figure 8.17. ex08-12.htm

graphics/08fig17.jpg


Figure 8.18. Picture of a parrot

graphics/08fig18.gif


8.3.3 Position and size of new window(s)

In additon to the look of a new window, the third argument of the window.open command also contains the size and position features. The size of a new window is controlled by the width and height attributes. For example, the code



<script>window.open("01_img.jpg","myPic","width=700,height=450")</script>

will display the picture in a new window of size 700 x 450 pixels. The position of the new window is controlled by the attributes top and left. The top attribute is measured from the top of your monitor screen and the left attribute from the left. The following code places a new window at the location 100 pixels from the top and 150 pixels from the left:



<script>window.open("01_img.jpg","myPic","top=100,left=150")</script>

The next example, ex08-13, is a modification of ex08-12.htm to give a full-screen display.



Listing ex08-02.txt - Code Fragment For ex08-13.htm

 1: <script>
 2:  window.resizeTo(440,380)
 3:  xhtmlFile = Array(7)
 4:  for (i=1;i<7;i++)
 5:  {
 6:    xhtmlFile[i]="0"+i+"_img.jpg"
 7:  }
 8:  function sPage()
 9:  {
10:   varL = document.getElementById("sel").selectedIndex
11:   imgSt = xhtmlFile[varL +1]
12:   titleSt="MyPic"
13:
14:   sWidth=screen.availWidth
15:   sHeight=screen.availHeight
16:
17:   lookSt="menubar=no,toolbar=no,location=no,resizable=yes,"+
18:          "top=0,left=0,width="+sWidth+",height="+sHeight
19:   window.open(imgSt,titleSt,lookSt)
20:  }
21: </script>

In this code fragment two new variables sWidth and sHeight are added in the function sPage(). The variable sWidth is used to store the available screen width returned by the screen.availWidth property. Together with the sHeight value, all these values are then added to the end of the look string lookSt (line 18). We also use top=0 and left=0 to locate the window at the top left corner of the monitor.

8.3.4 Random positioning of a series of pictures

In this section, you will learn how to develop a page that can open a series of randomly positioned new windows. The first step is to calculate the top left corner of every new window that you create. This is done by the random method of the browser:



topPic=Math.floor(Math.random()*500)
leftPic=Math.floor(Math.random()*700)

In this case, the random area is set to be 700 x 500 pixels. The coding of this example is given in ex08-14.htm.



Example: ex08-14.htm - Random Positioning Of A Series Of Pictures

 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>Random Positioning Of Pictures  ex0814.htm </title></head>
 6: <style>
 7:  .mSt{font-family:arial;font-size:14pt;font-weight:bold;color:#ffff00}
 8:  .bSt{background-color:#aaffaa;font-family:arial;font-weight:bold;
 9:      font-size:12pt;color:#ff0000;width:120px;height:30px}
10: </style>
11: <script>
12:  window.resizeTo(440,380)
13:
14:  xhtmlFile = Array(7)
15:  for (i=1;i<7;i++)
16:  {
17:    xhtmlFile[i]="0"+i+"_img.jpg"
18:  }
19:
20:  function randomPic()
21:  {
22:    for (i=1;i<7;i++){
23:      topPic=Math.floor(Math.random()*500)
24:      leftPic=Math.floor(Math.random()*700)
25:
26:      imgSt=xhtmlFile[i]
27:      titleSt="Pic"+i
28:      lookSt="menubar=no,toolbar=no,location=no,resizable=yes,top="+
29:              topPic+",left="+leftPic+",width=730,height=450"
30:      window.open(imgSt,titleSt,lookSt)
31:    }
32:  }
33: </script>
34: <body style="background:#000088;text-align:center"><div class="mSt">
35:    Random Positioning Of <br />A Number Of Pictures</div><br /><br />
36: <input type="button" onclick="randomPic()" value="Show Pic" class="bSt" />
37: </body>
38: </html>

This example displays six images (01_img.jpg through 06_img.jpg) randomly on the screen. The title variable titleSt in line 27 guarantees that all new windows are independent. Since the variables topPic and leftPic have random values, the new window that is generated by the window.open statement in line 30 has a random position (see Figs 8.19 and 8.20).

Figure 8.19. ex08-14.htm

graphics/08fig19.jpg


Figure 8.20. Random positioning of pictures

graphics/08fig20.gif


There is no timing control code in this example, which means that all pictures are displayed on the screen instantly. The speed of the display depends only on the speed of your computer. If you want to have more control over the display speed, the script part of this example (lines 1133) needs to be modified to incorporate timing control. A modification ex08-15.htm is given as follows:



Listing ex08-03.txt - Code Fragment For ex08-15.htm

 1: <script>
 2:  window.resizeTo(440,380)
 3:  xhtmlFile = Array(7)
 4:  displaySpeed=550
 5:
 6:  for (i=1;i<7;i++)
 7:  {
 8:    xhtmlFile[i]="0"+i+"_img.jpg"
 9:  }
10:  i=0
11:  function randomPic()
12:  {
13:    i++
14:    if (i < 7)
15:    {
16:      topPic=Math.floor(Math.random()*500)
17:      leftPic=Math.floor(Math.random()*700)
18:
19:      imgSt=xhtmlFile[i]
20:      titleSt="Pic"+i
21:      lookSt="menubar=no,toolbar=no,location=no,resizable=yes,top="+
22:              topPic+",left="+leftPic+",width=730,height=450"
23:      window.open(imgSt,titleSt,lookSt)
24:      setTimeout("randomPic()",displaySpeed)
25:    } else return true
26:  }
27: </script>

The variable i in line 10 is used to count and represent the ith image. The function terminates if you have already displayed six images. If the value of i is less than 7, the picture is displayed at a random position (lines 1623). The setTimeout() function in line 24 is used to count the timing. For every displaySpeed=550 unit time (1,000 units = 1 second), the randomPic()function is recalled and continues to display the images.

8.3.5 Cycling show of a group of XHTML pages

How do you handle a "cycling show" on a group of XHTML pages? Suppose you have a group of six pages, xhtmFile[1], xhtmlFile[2]. …, xhtmlFile[6] and want to develop a show that can display all of them randomly on screen. When all six pages are displayed on the screen, all the windows (or pages) will be closed and the random cycling show can be restarted.

For simplicity, the picture files from previous examples are used in these pages. Since we want to close all the windows once all pages are on the screen, a technique to close a window is needed.

When the window.open command opens a new window, the system will normally return a handle so that references can be made later. One usage of this window handle is to close it with the close() method (or function). For example, the following statement opens a new window with winHandle:



<script> winHandle = window.open("http://www.microsoft.com")</script>

To close this window, you can use the command



<script> winHandle.close() </script>

For a more protective (or professional) style, the following statement is used:



<script> if (winHandle && !winHandle.closed) winHandle.close() <script>

Now consider the coding in ex08-16.htm:



Example: ex08-16.htm - A Cycling Show

 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>Cycling Show  ex0816.htm </title></head>
 6: <style>
 7:  .mSt{font-family:arial;font-size:14pt;font-weight:bold;color:#ffff00}
 8:  .bSt{background-color:#aaffaa;font-family:arial;font-weight:bold;
 9:      font-size:12pt;color:#ff0000;width:120px;height:30px}
10: </style>
11: <script>
12:  window.resizeTo(440,380)
13:
14:  displaySpeed=550
15:  totalFile=6
16:  displayCycle=3
17:  ranTop = 500
18:  ranLeft = 700
19:
20:  xhtmlFile = new Array(totalFile+1)
21:  winH = new Array(totalFile+1)
22:  winId= new Array(totalFile+1)
23:
24:  for (i=1;i<= totalFile;i++)
25:  {
26:    xhtmlFile[i]="0"+i+"_img.jpg"
27:    winId[i]="winId"+i
28:    winH[i]="winHandle"+i
29:  }
30:  iFile=1
31:  iCycle=1
32:
33:  function randomPic()
34:  {
35:   if (iCycle <= displayCycle)
36:   {
37:      if (iFile <=totalFile)
38:      {
39:       topPic=Math.floor(Math.random()*ranTop)
40:       leftPic=Math.floor(Math.random()*ranLeft)
41:
42:       imgSt=xhtmlFile[iFile]
43:       titleSt=winId[iFile]
44:       lookSt="menubar=no,toolbar=no,location=no,resizable=yes,top="+
45:       topPic+",left="+leftPic+",width=730,height=450"
46:       winH[iFile]=window.open(imgSt,titleSt,lookSt)
47:       iFile++
48:
49:       setTimeout("randomPic()",displaySpeed)
50:     }
51:     else
52:     {
53:       for (j=1;j<=totalFile;j++)
54:       {
55:          if (winH[j] && !winH[j].closed) winH[j].close()
56:       }
57:       iFile=1
58:       iCycle++
59:       setTimeout("randomPic()",displaySpeed)
60:      }
61:    } else {
62:
63:      iCycle=1
64:      iFile=1
65:      return
66:   }
67:  }
68: </script>
69:
70: <body style="background:#000088;text-align:center">
71: <div class="mSt">Cycling Show A Group Of 6 Pages <br />
72:   (Picture Pages) 3 Times</div><br /> <br />
73: <input type="button" onclick="randomPic()" value="Show Pic" class="bSt" />
74: </body>
75: </html>

The first part of this page is for parameter settings (lines 1429). Five parameters are used to control the execution of the page.

displaySpeed

Integer, to control the time interval for each display.

totalFile

Integer, to indicate how many page files.

displayCycle

Integer, to control how many cycles.

ranTop

Integer, the maximum random range from the top.

ranLeft

Integer, the maximum random range from the left.


The for-loop in lines 2429 is used to set the xhtmlFile[ ] array so that all pages are in good order. The ramdonPic()function (lines 3367) is a modified version of the previous example to incorporate displayCycle and close all window functionalities. If all pages have already been displayed on the screen, the for-loop in lines 5356 will close them all. Finally, if the cycle reaches the displayCyle, the parameters iCycle and iFile (see lines 6364) are reset so that the cycling show stops and can retart. Some screen shots are shown in Figs 8.21 and 8.22.

Figure 8.21. ex08-16.htm

graphics/08fig21.jpg


Figure 8.22. Cycling show

graphics/08fig22.gif


    Table of Contents

    Previous Next