JavaScript 基礎問答 四
二、導航功能增強
1. 下拉菜單中的鏈接(Links in Select Menu)
Q:我如何實現(xiàn)在下拉菜單中鏈接到不同的頁面?
A:要創(chuàng)建一個所示的下拉菜單:
你可以使用下面的代碼:
- <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:我怎么才能把一個按鈕變?yōu)橹赶蛄硗庖粋€頁面的超鏈接呢?
A:要創(chuàng)建一個按鈕就像一個:
你可以使用這段代碼:
- <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:要創(chuàng)建你自己的后退按鈕,可以使用這段代碼:
- <form>
- <input type=button value="Back"
- onCLick="history.back()">
- </form>
現(xiàn)在試一下:
4. 前進按鈕(Forward Button)
Q:我能讓按鈕像瀏覽器中的“前進”按鈕一樣嗎?
A:要創(chuàng)建自己的“前進”按鈕,使用這段代碼:
- <form>
- <input type=button value="Forward"
- onCLick="history.forward()">
- </form>
如果瀏覽器上的前進按鈕當前不可用,那么這個“前進”按鈕同樣不能工作。這種情況就是當前頁是你瀏覽歷史中的最后一頁。換句話說,如果你是使用瀏覽器的“后退”按鈕到達的這個頁面(或者腳本編寫的后退按鈕),那么這個前進按鈕就可以工作。現(xiàn)在試一下吧!
5. 查詢字符串(Query Stirngs)
Q:我的腳步可以訪問當前URL中的查詢字符串嗎?
A:查詢字符串(或搜索字符串)是URL中的一個可選部分,它跟在文件名后面,以問號引導(?)。例如,下面的URL在HTML文件名后包含了一個查詢字符串 ?myquery:
http://www.myfirm.com/file.html?myquery
你的腳本可以使用JavaScript的location.search屬性訪問當前URL中的查詢字符按。點擊下面按鈕試一下看看?。榱瞬榭吹刂分械腢RL,你可能想要在頂層瀏覽器窗口中顯示這個頁面。)
創(chuàng)建這些按鈕的代碼是:
- <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. 向頁面?zhèn)鬟f參數(shù)(Passing parameters to a page)
Q:我可以從也頁面向另外一個頁面?zhèn)鬟f參數(shù)嗎?
A:可以。有幾種不同的方式可以實現(xiàn):
- 把參數(shù)保存在cookie中
- 把參數(shù)保存在另外一個窗口或框架的變量中
- 把參數(shù)存在可以修改的屬性top.name(瀏覽器窗口的名字)中
- 把參數(shù)作為一個查詢字符串拼接在目標頁面的URL后面
這里是一個簡單的例子來演示所有這些傳遞參數(shù)的方法。傳遞的值應該是字符換“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或更新版本中,創(chuàng)建一個文本范圍對象(下面的例子中是TRang),然后使用TRang.findText(string)。
示例:下面的腳本根據(jù)用戶輸入的文本查找并在頁面上高亮顯示。
這個示例的代碼為:
- <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>
相關文章
JavaScript Math.ceil() 函數(shù)使用介紹
Math.ceil(x) -- 返回大于等于數(shù)字參數(shù)的最小整數(shù)(取整函數(shù)),對數(shù)字進行上舍入,下面有個不錯的示例,感興趣的朋友可以參考下2013-12-12JavaScript中setUTCFullYear()方法的使用簡介
這篇文章主要介紹了JavaScript中setUTCFullYear()方法的使用簡介,是JS入門學習中的基礎知識,需要的朋友可以參考下2015-06-06Javascript數(shù)組循環(huán)遍歷之forEach詳解
本篇文章主要介紹了Javascript 數(shù)組循環(huán)遍歷之forEach詳解,對學習forEach有很好的幫助,有需要的可以了解一下。2016-11-11