脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → JavaScript FAQ

JavaScript 基础问答 四

 更新时间：2008年12月03日 16:58:21   作者：  
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'">
  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>

相关文章

  • 推荐JavaScript实现继承的最佳方式

    推荐JavaScript实现继承的最佳方式

    本文是介绍了实用call方法结合原型链方法来实现javascript继承的最佳方式，非常的实用，有需要的小伙伴可以参考下
    2014-11-11
  • input按钮的事件处理大全

    input按钮的事件处理大全

    input按钮的事件处理大全,收集的是网页中常用的一些事件处理，需要的朋友可以收藏下。
    2010-12-12
  • js原型继承的两种方法对比介绍

    js原型继承的两种方法对比介绍

    这篇文章主要介绍了js原型继承的两种方法对比介绍,需要的朋友可以参考下
    2014-03-03
  • 深入理解JavaScript 函数

    深入理解JavaScript 函数

    下面小编就为大家带来一篇深入理解JavaScript 函数。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • js关于字符长度限制的问题示例探讨

    js关于字符长度限制的问题示例探讨

    字符长度限制在某些特殊的使用场合还是比较实用的，下面为大家用示例探讨下，感兴趣的朋友可以参考下
    2014-01-01
  • javascript实现计算器功能详解流程

    javascript实现计算器功能详解流程

    这篇文章主要为大家详细介绍了JavaScript实现简单计算器小功能，只学书上的理论是远远不够的，只有在实战中才能获得能力的提升，大家可以在本篇实例中查缺补漏，提升水平
    2021-11-11
  • 在浏览器中打开或关闭JavaScript的方法

    在浏览器中打开或关闭JavaScript的方法

    这篇文章主要介绍了在浏览器中打开或关闭JavaScript的方法,由于历史遗留问题,JS在目前任何浏览器中都是标配...所以不想加载JS也可以选择关闭,需要的朋友可以参考下
    2015-06-06
  • JavaScript DOM 学习第九章 选取范围的介绍

    JavaScript DOM 学习第九章 选取范围的介绍

    这一章会对范围对象做一些介绍。使用这个对象你能选取HTML文档中的任何部分然后根据选取信息作一些事情。最常见的范围对象是由用户选择的。
    2010-02-02
  • Javascript的this详解

    Javascript的this详解

    这篇文章主要介绍了Javascript的this的作用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • JavaScript String.replace函数参数实例说明

    JavaScript String.replace函数参数实例说明

    JavaScript String.replace函数作用是将源自符串中的match替换为replacement并返回替换后的字符串，使用介绍如下，不会的朋友可以了解下哈
    2013-06-06

最新评论