利用location的hash值來解決Ajax兩大難題

來源:互聯網
上載者:User
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來調整顯示頁面。比如: var hash;hash=(!window.location.hash)?"#search":window.location.hash;window.location.hash=hash;     //調整地址欄地址,使前進、後退按鈕能使用switch(hash){  case "#search":    selectPanel("pnlSearch");  //顯示普通搜尋面板    break;  case "#advsearch":    ...  case "#admin":    ...}  

通過window.location.hash=hash這個語句來調整地址欄的地址,使得瀏覽器裡邊的“前進”、[上一頁] 按鈕能正常使用(實質上欺騙了瀏覽器)。然後再根據hash值的不同來顯示不同的面板(使用者可以收藏對應的面板了),這就使得Ajax頁面的瀏覽趨於傳統化了。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.