作者:b98625400 | 来源:互联网 | 2018-05-14 06:22
二、导航功能增强
1. 下拉菜单中的链接(Links in Select Menu)
Q :我如何实现在下拉菜单中链接到不同的页面?
A :要创建一个所示的下拉菜单: 选择一个页面 Javascript FAQ Numbers Strings Navigation Colors Javascripter.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 =" self self.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 =" self self.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:可以。有几种不同的方式可以实现:
function SetCOOKIE(COOKIEName,COOKIEValue,nDays) {
var today = new Date();
var expire = new Date();
if (nDays==null || nDays==0) nDays=1;
expire.setTime(today.getTime() + 3600000*24*nDays);
document.COOKIE = COOKIEName+"="+escape(COOKIEValue)
+ ";expires="+expire.toGMTString();
}
《SCRIPT》
把参数保存在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)。
示例:下面的脚本根据用户输入的文本查找并在页面上高亮显示。
《SCRIPT》
这个示例的代码为:
< 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 >