js選擇並轉移導航選單範例程式碼_javascript技巧
- WBOY原創
- 2016-05-16 16:39:191144瀏覽
實作html介面
<!DOCTYPE html> <html> <head> <title>Select and Go Navigation</title> <script src="script01.js"></script> <link rel="stylesheet" href="script01.css" rel="external nofollow" > </head> <body> <form action="gotoLocation.cgi" class="centered"> <select id="newLocation"> <option selected>Select a topic</option> <option value="script06.html">Cross-checking fields</option> <option value="script07.html">Working with radio buttons</option> <option value="script08.html">Setting one field with another</option> <option value="script09.html">Validating Zip codes</option> <option value="script10.html">Validating email addresses</option> </select> <noscript> <input type="submit" value="Go There!"> </noscript> </form> </body> </html>
實現選單導航
window.onload = initForm;
window.onunload = function() {};
function initForm() {
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
}
function jumpPage() {
var newLoc = document.getElementById ("newLocation");
var newPage = newLoc.options [newLoc.selectedIndex].value;
if (newPage != "") {
window.location = newPage;
}
}
下面是源碼分析
1.
window.onload = initForm;
window.onunload = function() {};
在視窗載入時，呼叫initForm()函數。下一行需要解釋一下，因為它是處理某些瀏覽器的古怪行為的變通方法。
當視窗卸載時（即關閉視窗或瀏覽器轉到另一個網址），我們呼叫一個匿名函數（anonymousfunction），即沒有名稱的函數。在這個範例中，這個函數不但沒有名稱，而且根本不做任何事。提供這個函數是因為必須將onunload設定為某種東西，否則，當點擊瀏覽器的back按鈕時，就不會觸發onload事件，因為在某些瀏覽器（例如Firefox和Safari）中頁面會被緩存。讓onunload執行任何操作，就會使頁面不被緩存，因此當使用者後退時，會發生onload事件。
匿名是指在function和()之間沒有名稱。這是觸發onunload但不讓它做任何事情的最簡單的方法。與任何函數中一樣，花括號包含函數的內容。這裡的花括號是空的，因為這個函數不做任何事。
2.
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
在initForm()函數中，第一行取得HTML頁面上的選單（它的id為newLocation），並且將它的selectedIndex屬性設為零，這會使它顯示Select a topic。
第二行讓腳本在選單選擇改變時，呼叫jumpPage()函數。
3.
var newLoc = document.getElementById("newLocation");
在jumpPage()函數中，newLoc變數會尋找訪客在選單中選擇的值。
4.
var newPage = newLoc.options[newLoc.selectedIndex].value;
從方括號中的程式碼開始，向外依序分析。 newLoc.selectedIndex是一個從0～5的數字（因為有6
個選單選項。記住JavaScript的編號常常是基於零的）。得到這個數字之後，接下來得到對應的選單項目
的值，這就是我們希望跳到的網頁的名稱。然後，將結果賦值給變數newPage。
5.
if (newPage != "") {
window.location = newPage;
這個條件語句首先檢查newPage是否為非空。換句話說，如果newPage有一個值，那麼就讓視窗轉到
選擇的選單項目所指定的URL。