JavaScript 基础问答 四

 二、导航功能增强

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

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

A：要创建一个所示的下拉菜单：

你可以使用下面的代码：

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'">

7. 
   

8. <input type=button value="Show query" 

9. onClick="alert('Query string: '+self.location.search)">

10. 
    

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：可以。有几种不同的方式可以实现：