JavaScript FAQ(四)——导航功能增强

 二、导航功能增强

 

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

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

A:要创建一个所示的下拉菜单:选择一个页面JavaScript FAQNumbersStringsNavigationColorsJavaScripter.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.  按钮链接(Button Links

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.  后退按钮(Back Button

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

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

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

现在试一下:

 

 

4. 前进按钮(Forward Button

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

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

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

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

 

5. 查询字符串(Query Stirngs

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>

注意:查询字符串有时候可能不会如预期一样的工作。例如,如果你将这个页面保存本地磁盘上,上面在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)。

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

这个示例的代码为:

<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>
时间: 2024-09-21 11:08:47

JavaScript FAQ(四)——导航功能增强的相关文章

Javascript知识四(DOM)

原文:Javascript知识四(DOM)  [箴 10:4] 手懒的,要受贫穷:手勤的,却要富足. He becometh poor that dealeth with a slack hand: but the hand of the diligent maketh rich. O(∩_∩)O~~ 昨天总结了<Javascript知识三>后忘记发布了,呵呵,最近我的忘性很大啊O(∩_∩)O~~,今天是练习,所以把这周还未总结的写下来,和大家一起分享交流. 首先,还是先把function剩下

JavaScript FAQ(一)—— 常见问题(一)

        今天在网上看到了一份很不错的JavaScript FAQ,由于担心自己并不能一直把它读完,所以就尝试翻译一些内容,和朋友们一起分享.        FAQ原地址:http://www.javascripter.net/faq/index.htm        一.常见问题        1.关于这个FAQ(About this FAQ)        Q:为什么要使用这个FAQ?        A:这个FAQ的目的是帮助你开发强壮的客户端脚本,它不但可以运行在Netscape N

JavaScript FAQ(二十五 完)—— 错误处理

二十二.错误处理   1.禁止JS错误(Suppress JS Errors) Q:我是否可以禁止JavaScript错误信息? A:可以.要禁止页面上所有的JavaScript错误信息,你要把下面一段代码放在页面的HEAD部分: <SCRIPT language="JavaScript"> <!-- function silentErrorHandler() {return true;} window.onerror=silentErrorHandler; //--

JavaScript FAQ(二十四)—— 声音

二十一.声音   1.可以播放声音的浏览器(Audio-enabled Browsers) Q:什么可以浏览器可以执行播放声音的脚本? A:如果在声音播放描述的技术可以在Miscrosoft Internet Explorer 4.0及其更新版本中工作,那么同样可以在Netscape Navigator 3.0及其更新版本中工作.要在Internet Explorer中播放声音,在4.0以及后来版本中测试就足够了.然后在Netscape Navigator中,你必须确保以下几点: 浏览器版本是3

JavaScript FAQ(十四)——鼠标事件(一)

十二. 鼠标事件   1. 鼠标事件属性(Mouse Event Properties) Q:哪些事件属性我可以用来分析鼠标事件?A:Netscape Navigator 4和Internet Explorer 4(以及较新版本)支持相当少的事件属性.其中一些在两个浏览器上是一样的(例如,event.screenX或者event.typ):不过,多数还是平台相关.移动或点击鼠标,下面的文本框会显示你当前浏览器()的所有事件属性:(译者注:由于原文实例不能正确运行,这里只贴出相关的JavaScri

JavaScript FAQ(九)——Ajax

 七.Ajax问题   1. Ajax:异步JavaScript和XML(Ajax: Asynchronous JavaScript and XML) Q:Ajax这个流行词到底是什么意思呀? A:Ajax这个短语最初有Jesse James Garrett提出,他是Adaptive Path的共同创始人.缩略语Ajax(通常只有第一个字母A大写)代表异步JavaScript和XML(Asynchronous JavaScript and XML):从本质上说,它是一个营销短语,意思是可以开发一

JavaScript FAQ(六)——字符串

 四.字符串   1. 字符串中的引号(Quotes in String) Q:我如何在字符串中插入引号呢? A:字符串中的引号应该用一个反斜杠(/)引导.如此,JavaScript就会分辨出这些引号是普通字符串还是字符串的分隔符.下面是示例: string1='It/'s five o/'clock!'; string2="<A HREF=/"index.htm/">"; 或者,如果字符串中只包含有单引号,那么你可以使用双引号作为字符串的分隔符,反之亦

JavaScript FAQ (十九)——文件访问

十六.文件访问(File Access)   1.读取文件(Reading a File) Q:如何将文件读取到JavaScript变量中? A:根据脚本运行的环境和文件的位置,你可以有以下选项: XMLHttpRequest 对象(通过URL读取网站上可用的文件) FileSystemObject(如果你在一个被信任的环境下使用Windows Scripting Hosting或者IE) 一个读取文件或者URL的"助手"Java applet  关于前两个选项的讨论,请点击上面的超链

JavaScript FAQ(七)——对话框

 五.对话框   1. 警告(Alert) Q:我如何从JavaScript产生警告信息? A:要产生警告信息,可以使用alert()方法:   alert('Message goes here'); 上面的按钮由下面的代码创建: <form name=myform> <input type=button value="Try it now" onClick="alert('Hello from JavaScript!')"> </fo