JavaScript 基礎問答 四

二、導航功能增強

1. 下拉式功能表中的連結（Links in Select Menu）

Q：我如何?在下拉式功能表中連結到不同的頁面？

A：要建立一個所示的下拉式功能表：
選擇一個頁面JavaScript FAQNumbersStringsNavigationColorsJavaScripter.net

你可以使用下面的代碼：

1. <form>
2. <select
3. onChange="if(this.selectedIndex!=0)
4. self.location=this.options[this.selectedIndex].value">
5. <option value="" selected>Select a page
6. <option value="startpag.htm">JavaScript FAQ
7. <option value="numbers.htm">Numbers
8. <option value="strings.htm">Strings
9. <option value="navigati.htm">Navigation
10. <option value="colors.htm">Colors
11. <option value="http://www.javascripter.net">JavaScripter.net
12. </select>
13. </form>

只需要把功能表項目及其相應的URL改為你需要就可以了。你可以使用絕對位址（就像http://www.javascripter.net），也可以使用相對位址（像 mypage.htm）。

2. 按鈕連結（Button Links）

Q：我怎麼才能把一個按鈕變為指向另外一個頁面的超連結呢？

A：要建立一個按鈕就像一個：

你可以使用這段代碼：

1. <form>
2. <input type=button
3. value="insert button text here"
4. onClick="self.location='Your_URL_here.htm'">
5. </form>

只需要改為你需要的按鈕文本和目標地址。試一下這個：

你可以使用絕對位址（像http://www.javascripter.net）也可以使用相對位址（像mypage.htm）。

3. 後退按鈕（Back Button）

Q：我能讓按鈕像瀏覽器的[上一頁] 按鈕一樣嗎？

A：要建立你自己的後退按鈕，可以使用這段代碼：

1. <form>
2. <input type=button value="Back"
3. onCLick="history.back()">
4. </form>

現在試一下：

4. 前進按鈕（Forward Button）

Q：我能讓按鈕像瀏覽器中的“前進”按鈕一樣嗎？

A：要建立自己的“前進”按鈕，使用這段代碼：

1. <form>
2. <input type=button value="Forward"
3. onCLick="history.forward()">
4. </form>

如果瀏覽器上的前進按鈕當前不可用，那麼這個“前進”按鈕同樣不能工作。這種情況就是當前頁是你瀏覽曆史中的最後一頁。換句話說，如果你是使用瀏覽器的“後退”按鈕到達的這個頁面（或者指令碼編寫的後退按鈕），那麼這個前進按鈕就可以工作。現在試一下吧！

5. 查詢字串（Query Stirngs）

Q：我的腳步可以訪問當前URL中的查詢字串嗎？

A：查詢字串（或搜尋字串）是URL中的一個可選部分，它跟在檔案名稱後面，以問號引導（?）。例如，下面的URL在HTML檔案名稱後包含了一個查詢字串 ?myquery：

http://www.myfirm.com/file.html?myquery

你的指令碼可以使用JavaScript的location.search屬性訪問當前URL中的查詢字元按。點擊下面按鈕試一下看看！（為了查看地址中的URL，你可能想要在頂層瀏覽器視窗中顯示這個頁面。）

建立這些按鈕的代碼是：

1. <form>
2. <input type=button value="Add query ?test"
3. onClick="selfself.location=
4. self.location.protocol+'//'
5. +self.location.host
6. +self.location.pathname+'?test'">
8. <input type=button value="Show query"
9. onClick="alert('Query string: '+self.location.search)">
11. <input type=button value="Remove query"
12. onClick="selfself.location=
13. self.location.protocol+'//'
14. +self.location.host
15. +self.location.pathname">
16. </form>

注意：查詢字串有時候可能不會如預期一樣的工作。例如，如果你將這個頁面儲存本地磁碟上，上面在Internet Explorer 4.x就不會工作（但是在Netscape Navigator中依然有效）。

6. 向頁面傳遞參數（Passing parameters to a page）

Q：我可以從也頁面向另外一個頁面傳遞參數嗎？

A：可以。有幾種不同的方式可以實現：

• 把參數儲存在cookie中
• 把參數儲存在另外一個視窗或架構的變數中
• 把參數存在可以修改的屬性top.name（瀏覽器視窗的名字）中
• 把參數作為一個查詢字串拼接在目標頁面的URL後面

這裡是一個簡單的例子來示範所有這些傳遞參數的方法。傳遞的值應該是字元換“It_worked”。當你點擊下面的按鈕時，按鈕的事件指令碼會存在這些值（1）在名為parm_value的cookie中，（2）以頂層變數top.parm_value儲存以及（3）在top.name屬性中。然後，指令碼引導瀏覽器到parm_get.htm，它的URL包含一個值為URL編碼的查詢字串。

7. 尋找文本（Searching for text）

Q：我怎樣在頁面查詢一個特定的文本字串？

A：在Netscape Navigator 4.x中，可以使用window.find(string) 方法尋找；參見尋找對話方塊。在Internet Explorer 4.x或更新版本中，建立一個文本範圍對象（下面的例子中是TRang），然後使用TRang.findText(string)。

樣本：下面的指令碼根據使用者輸入的文本尋找並在頁面上高亮顯示。

這個樣本的代碼為：

1. <form name="f1" action=""
2. onSubmit="if(this.t1.value!=null && this.t1.value!='')
3. findString(this.t1.value);return false"
4. >
5. <input type="text" name=t1 value="" size=20>
6. <input type="submit" name=b1 value="Find">
7. </form>
9. <script language="JavaScript">
10. <!--
11. var TRange=null
13. function findString (str) {
14. if (parseInt(navigator.appVersion)<4) return;
15. var strFound;
16. if (navigator.appName=="Netscape") {
18. // NAVIGATOR-SPECIFIC CODE
20. strFound=self.find(str);
21. if (!strFound) {
22. strFound=self.find(str,0,1)
23. while (self.find(str,0,1)) continue
24. }
25. }
26. if (navigator.appName.indexOf("Microsoft")!=-1) {
28. // EXPLORER-SPECIFIC CODE
30. if (TRange!=null) {
31. TRange.collapse(false)
32. strFound=TRange.findText(str)
33. if (strFound) TRange.select()
34. }
35. if (TRange==null || strFound==0) {
36. TRange=self.document.body.createTextRange()
37. strFound=TRange.findText(str)
38. if (strFound) TRange.select()
39. }
40. }
41. if (!strFound) alert ("String '"+str+"' not found!")
42. }
43. //-->
44. </script>