JavaScript FAQ（四）

二、导航功能增强

1. 下拉菜单中的链接（Links in Select Menu）

Q：我如何实现在下拉菜单中链接到不同的页面？

A：要创建一个所示的下拉菜单：选择一个页面 JavaScript FAQ Numbers Strings Navigation Colors JavaScripter.net

你可以使用下面的代码：

1. <form>
2. <select
3. onChange="if(this.selectedIndex!=0)
4. self.location=this.options[this.selectedIndex].value">
5. <optionvalue=""selected>Selectapage
6. <optionvalue="startpag.htm">JavaScriptFAQ
7. <optionvalue="numbers.htm">Numbers
8. <optionvalue="strings.htm">Strings
9. <optionvalue="navigati.htm">Navigation
10. <optionvalue="colors.htm">Colors
11. <optionvalue="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. <inputtype=button
3. value="insertbuttontexthere"
4. onClick="self.location='Your_URL_here.htm'">
5. </form>

只需要改为你需要的按钮文本和目标地址。试一下这个：

你可以使用绝对地址（像http://www.javascripter.net）也可以使用相对地址（像mypage.htm）。

3. 后退按钮（Back Button）

Q：我能让按钮像浏览器的“后退”按钮一样吗？

A：要创建你自己的后退按钮，可以使用这段代码：

1. <form>
2. <inputtype=buttonvalue="Back"
3. onCLick="history.back()">
4. </form>

现在试一下：

4. 前进按钮（Forward Button）

Q：我能让按钮像浏览器中的“前进”按钮一样吗？

A：要创建自己的“前进”按钮，使用这段代码：

1. <form>
2. <inputtype=buttonvalue="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. <inputtype=buttonvalue="Addquery?test"
3. onClick="selfself.location=
4. self.location.protocol+'//'
5. +self.location.host
6. +self.location.pathname+'?test'">
8. <inputtype=buttonvalue="Showquery"
9. onClick="alert('Querystring:'+self.location.search)">
11. <inputtype=buttonvalue="Removequery"
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. <formname="f1"action=""
2. onSubmit="if(this.t1.value!=null&&this.t1.value!='')
3. findString(this.t1.value);returnfalse"
4. >
5. <inputtype="text"name=t1value=""size=20>
6. <inputtype="submit"name=b1value="Find">
7. </form>
9. <scriptlanguage="JavaScript">
10. <!--
11. varTRange=null
13. functionfindString(str){
14. if(parseInt(navigator.appVersion)<4)return;
15. varstrFound;
16. if(navigator.appName=="Netscape"){
18. //NAVIGATOR-SPECIFICCODE
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-SPECIFICCODE
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+"'notfound!")
42. }
43. //-->
44. </script>