Basic JavaScript Q & A 4

Ii. Enhanced navigation

1. Link (links in select menu) in the drop-down menu)

Q: How can I link to different pages in the drop-down menu?

A: Create a drop-down menu as shown in the following figure:
Select a pageJavascript FAQNumbersStringsNavigationColorsJavascripter.net

You can use the followingCode:

2. <Form>
4. <Select
6. Onchange= "If (this. selectedindex! = 0)
8. Self. Location=This. Options [This. selectedindex]. Value">
10. <Option Value=""Selected>Select a page
12. <Option Value="Startpag.htm">Javascript FAQ
14. <Option Value="Numbers.htm">Numbers
16. <Option Value="Strings.htm">Strings
18. <Option Value="Navigati.htm">Navigation
20. <Option Value="Colors.htm">Colors
22. <Option Value=Http://www.javascripter.net">Javascripter.net
24. </Select>
26. </Form>

You only need to change the menu item and its corresponding URL to your need. You can use absolute addresses (like http://www.javascripter.net), or relative addresses (like mypage.htm ).

2. Button Link)

Q: How can I change a button to a hyperlink pointing to another page?

A: To create a button is like:

You can use this code:

1. form
2. input type = button
3. value = "insert button text here"
4. onclick = "self.location+'your_url_here.htm'" >
5. form >

You only need to change it to the button text and target address you need. Try this:

You can use an absolute address (like a http://www.javascripter.net consumer can also use a relative address (like mypage.htm ).

3. Back button)

Q: Can I make the button the same as the "back" button in the browser?

A: Create your ownBackYou can use this code:

1. <Form>
2. <Input Type=Button Value="Back"
3. Onclick="History. Back ()">
4. </Form>

Try it now:

4. forward button)

Q: Can I make the button the same as the "Forward" button in the browser?

A: To create your own "Forward" button, use this code:

1. <Form>
2. <Input Type=Button Value="Forward"
3. Onclick="History. Forward ()">
4. </Form>

IfForwardThe button is currently unavailable.Forward"Button cannot work. In this case, the current page is the last page in your browsing history. In other words, if you use theBackThe page (orBack), Then the forward button can work. Try it now!

5. Query string (query stirngs)

Q: Can I access the query string in the current URL?

A: The query string (or search string) is an optional part of the URL. It follows the file name and is guided by a question mark (?). For example, the following URL contains a query string after the HTML file name? Myquery:

Http://www.myfirm.com/file.html? Myquery

Your script can use the location. Search property of JavaScript to access the query characters in the current URL. Click the following button to try it out! (To view the URL in the address, you may want to display the page in the top-layer browser window .)

The code for creating these buttons is:

2. <Form>
4. <Input Type=Button Value="Add query? Test"
6. Onclick="SelfSelf. Location=
8. Self. Location. Protocol + '//'
10. + Self. Location. Host
12. + Self. Location. pathname + '? Test '">
16. <Input Type=Button Value="Show query"
18. Onclick="Alert ('query string: '+ self. Location. Search )">
22. <Input Type=Button Value="Remove query"
24. Onclick="SelfSelf. Location=
26. Self. Location. Protocol + '//'
28. + Self. Location. Host
30. + Self. Location. pathname">
32. </Form>

Note:Query strings may not work as expected. For example, if you save the page to a local disk, the page above will not work in Internet Explorer 4.x (but it will still work in Netscape Navigator ).

6. Pass parameters to the page (passing parameters to a page)

Q: Can I pass parameters to another page?

A: Yes. There are several different ways to achieve this:

• Save parameters in cookie
• Save the parameter in another window or frame variable.
• Store the parameter in the top. Name (name of the browser window) attribute that can be modified.
• Concatenates a parameter as a query string behind the URL of the target page

Here is a simple example to demonstrate all the methods for passing parameters. The passed value should be the character "it_worked ". When you click the following button, the event script of the button will have these values (1) in the cookie named parm_value, (2) with the top-level variable top. save parm_value and (3) in top. name attribute. Then, the browser directs to parm_get.htm. Its URL contains a URL encoded query string.

7. Searching for text)

Q: How can I query a specific text string on the page?

A: In Netscape Navigator 4. x, you can use the window. Find (string) method for search. See the Search dialog box. In Internet Explorer 4.x or later versions, create a text range object (Trang in the following example) and use trang. findtext (string ).

Example: The following script searches for the text entered by the user and highlights it on the page.

The code in this example is:

2. <Form Name="F1" Action=""
4. Onsubmit= "If (this. t1.value! = NULL & this. t1.value! = '')
6. Findstring (this. t1.value); Return false"
8. >
10. input type = "text" name = t1 value = " " size = 20 >
12. <Input Type="Submit" Name=B1 Value="Find">
14. </Form>
18. <Script Language="JavaScript">
20. <! --
22. VaRTrange=Null
26. Function findstring (STR ){
28. If (parseint (navigator. appversion)<4) Return;
30. VaR strfound;
32. If (Navigator. appname= "Netscape "){
36. // Navigator-specific code
40. Strfound=Self. Find (STR );
42. If (! Strfound ){
44. Strfound=Self. Find (STR, 0, 1)
46. While (self. Find (STR, 0, 1) continue
48. }
50. }
52. If (navigator. appname. indexof ("Microsoft ")! =-1 ){
56. // Explorer-specific code
60. If (trange! = NULL ){
62. Trange. Collapse (false)
64. Strfound=Trange. Findtext (STR)
66. If (strfound) trange. Select ()
68. }
70. If (Trange= NULL |Strfound= 0 ){
72. Trange=Self. Document. Body. createTextRange ()
74. Strfound=Trange. Findtext (STR)
76. If (strfound) trange. Select ()
78. }
80. }
82. If (! Strfound) Alert ("string" + STR + "'not found! ")
84. }
86. //-->
88. </Script>