您好,登錄后才能下訂單哦!
location是javascript里邊管理地址欄的內置對象,比如location.href就管理頁面的url,用location.href=url就可以直接將頁面重定向url。而location.hash則可以用來獲取或設置頁面的標簽值。比如http://domain/#admin的location.hash="#admin"。利用這個屬性值可以做一個非常有意義的事情。
很多人都喜歡收藏網頁,以便于以后的瀏覽。不過對于Ajax頁面來說的話,一般用一個頁面來處理所有的事務,也就是說,如果你瀏覽到一個Ajax頁面里邊有意思的內容,想將它收藏起來,可是地址只有一個呀,下次你打開這個地址,還是得像以往一樣不斷地去點擊網頁,找到你鐘情的那個頁面。另外的話,瀏覽器上的“前進”“后退”按鈕也會失效,這于很多習慣了傳統頁面的用戶來說,是一個很大的使用障礙。
那么,怎么用location.hash來解決這兩個問題呢?其實一點也不神秘。
比如,我的作者管理系統,主要功能有三個:普通搜索、高級搜索、后臺管理,我分別給它們分配一個hash值:#search、#advsearch、#admin,在頁面初始化的時候,通過window.location.hash來判斷用戶需要訪問的頁面,然后通過javascript來調整顯示頁面。比如:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>window.location.hash</title> <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ console.log("--- begin...."); var hash = (!window.location.hash) ? "#search" : window.location.hash; window.location.hash = hash; console.log("hash : " + hash); switch(hash) { case "#search": console.log("search"); break; case "#advsearch": console.log("advsearch"); break; case "#admin": console.log("#admin"); break; default : console.log("NO#"); } }); function go(hash) { //var hash = (!window.location.hash) ? "#search" : window.location.hash; console.log(" go --- hash : " + hash); window.location.hash = hash; switch(hash) { case "search": $("h3").html("search"); break; case "advsearch": $("h3").html("advsearch"); break; case "admin": $("h3").html("#admin"); break; default : console.log("NO#"); } } //測試:在地址欄輸入:file:///C:/Users/Administrator/Desktop/hash.html#admin </script> </head> <body> <input type="button" value="search" id="search" onclick="go('search')"/> <h3>第一部分</h3> <input type="button" value="advsearch" id="advsearch" onclick="go('advsearch')"/> <br /><br /> <input type="button" value="admin" id="admin" onclick="go('admin')"/> </body> </html>
參考 :1 2 3
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。