提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JavaScript基础问答四

JavaScript基础 问答
2023-06-13 09:14:07 时间
 二、导航功能增强

 

1.下拉菜单中的链接（LinksinSelectMenu）

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

A：要创建一个所示的下拉菜单：选择一个页面JavaScriptFAQNumbersStringsNavigationColorsJavaScripter.net

你可以使用下面的代码：

  • <form>
    • <select 
  • onChange="if(this.selectedIndex!=0)
    • self.location=this.options[this.selectedIndex].value">
  • <option value="" selected>Select a page
    • <option value="startpag.htm">JavaScript FAQ
  • <option value="numbers.htm">Numbers
    • <option value="strings.htm">Strings
  • <option value="navigati.htm">Navigation
    • <option value="colors.htm">Colors
  • <option value="http://www.javascripter.net">JavaScripter.net
    • </select>
  • </form> 

    • 只需要把菜单项及其相应的URL改为你需要就可以了。你可以使用绝对地址（就像http://www.javascripter.net），也可以使用相对地址（像mypage.htm）。

     

    2. 按钮链接（ButtonLinks）

    Q：我怎么才能把一个按钮变为指向另外一个页面的超链接呢？

    A：要创建一个按钮就像一个：

    你可以使用这段代码：

  • <form> 
    • <input type=button 
  • value="insert button text here"
    • onClick="self.location="Your_URL_here.htm"">
  • </form> 

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

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

     

    3. 后退按钮（BackButton）

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

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

  • <form>
    • <input type=button value="Back"
  • onCLick="history.back()">
    • </form>

    现在试一下：

     

    4.前进按钮（ForwardButton）

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

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

  • <form>
    • <input type=button value="Forward"
  • onCLick="history.forward()">
    • </form>

    如果浏览器上的前进按钮当前不可用，那么这个“前进”按钮同样不能工作。这种情况就是当前页是你浏览历史中的最后一页。换句话说，如果你是使用浏览器的“后退”按钮到达的这个页面（或者脚本编写的后退按钮），那么这个前进按钮就可以工作。现在试一下吧！

     

    5.查询字符串（QueryStirngs）

    Q：我的脚步可以访问当前URL中的查询字符串吗？

    A：查询字符串（或搜索字符串）是URL中的一个可选部分，它跟在文件名后面，以问号引导（?）。例如，下面的URL在HTML文件名后包含了一个查询字符串?myquery：

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

    你的脚本可以使用JavaScript的location.search属性访问当前URL中的查询字符按。点击下面按钮试一下看看！（为了查看地址中的URL，你可能想要在顶层浏览器窗口中显示这个页面。）

    创建这些按钮的代码是：

  • <form>
    • <input type=button value="Add query ?test"  
  • onClick="selfself.location=
    • self.location.protocol+"//"
  • +self.location.host
    • +self.location.pathname+"?test"">
    • <input type=button value="Show query" 
  • onClick="alert("Query string: "+self.location.search)">
  • <input type=button value="Remove query" 
    • onClick="selfself.location=
  • self.location.protocol+"//"
    • +self.location.host
  • +self.location.pathname">
    • </form>

    注意：查询字符串有时候可能不会如预期一样的工作。例如，如果你将这个页面保存本地磁盘上，上面在InternetExplorer4.x就不会工作（但是在NetscapeNavigator中依然有效）。

     

    6.向页面传递参数（Passingparameterstoapage）

    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.查找文本（Searchingfortext）

    Q：我怎样在页面查询一个特定的文本字符串？

    A：在NetscapeNavigator4.x中，可以使用window.find(string)方法查找；参见查找对话框。在InternetExplorer4.x或更新版本中，创建一个文本范围对象（下面的例子中是TRang），然后使用TRang.findText(string)。

    示例：下面的脚本根据用户输入的文本查找并在页面上高亮显示。

    这个示例的代码为：

  • <form name="f1" action="" 
    • onSubmit="if(this.t1.value!=null && this.t1.value!="")
  • findString(this.t1.value);return false"
    • >
  • <input type="text" name=t1 value="" size=20>
    • <input type="submit" name=b1 value="Find">
  • </form>
  • <script language="JavaScript">
    • <!--
  • var TRange=null
  • function findString (str) {
    •  if (parseInt(navigator.appVersion)<4) return;
  •  var strFound;
    •  if (navigator.appName=="Netscape") {
    •   // NAVIGATOR-SPECIFIC CODE
    •   strFound=self.find(str);
  •   if (!strFound) {
    •    strFound=self.find(str,0,1)
  •    while (self.find(str,0,1)) continue
    •   }
  •  }
    •  if (navigator.appName.indexOf("Microsoft")!=-1) {
    •   // EXPLORER-SPECIFIC CODE
    •   if (TRange!=null) {
  •    TRange.collapse(false)
    •    strFound=TRange.findText(str)
  •    if (strFound) TRange.select()
    •   }
  •   if (TRange==null || strFound==0) {
    •    TRange=self.document.body.createTextRange()
  •    strFound=TRange.findText(str)
    •    if (strFound) TRange.select()
  •   }
    •  }
  •  if (!strFound) alert ("String ""+str+"" not found!")
    • }
  • //-->
    • </script>

    • 相关文章