2011-05-09 47 views
8

我有一個頁面上有很多動態生成的複選框。當用戶單擊這些複選框時,頁面上的許多內容會通過ajax動態更改。最終用戶抱怨說,點擊提交後點擊後退按鈕來改變某些內容,他們的選擇就會被吹走,他們必須重新做一遍。如何使瀏覽器返回按鈕通過AJAX調用返回?

我已經看到一些網站(Gmail,Facebook等)使用URL中的哈希符號來破解後退按鈕,以便它執行AJAX調用,而不是返回到前一個完整頁面請求。我想這樣做是爲了在頁面提交之前修改URL,以便點擊後退按鈕將加載他們以前選擇的字段。

例如:

在Gmail中,如果我查看我的收件箱,然後我的URL看起來是這樣的:https://mail.google.com/mail/?shva=1#inbox

然後如果我點擊「發送郵件」進行AJAX調用和我的網址修改爲看起來像這樣:https://mail.google.com/mail/?shva=1#sent

我真的很喜歡這種行爲,並且想要複製它。這是如何完成的?

  1. 不要你的鏈接實際上觸發任何JavaScript還是僅僅鏈接到的URL與適當的散列符號信息?

  2. 如何讀取JavaScript中的哈希符號信息?

  3. 這種類型的導航如何影響搜索引擎?搜索引擎是否知道除了散列之後的信息相同的兩個URL實際上是不同的URL並將它們編入索引之後呢?

  4. 我應該考慮這種技術的其他優點和缺點?

注:我使用C#與ASP.NET Web窗體和ASP.NET MVC 3.0萬一重要。

+0

也從這個線程得到的想法http://stackoverflow.com/questions/973739/how-can-i-get-the-same-page-with-the-click-of-back-button-of -browser/973753#973753 – 2011-05-10 05:16:11

+0

這算不上什麼我一直在尋找穆罕默德。 – Chev 2011-05-10 13:54:51

回答

2

jQuery插件: http://tkyk.github.com/jquery-history-plugin/

,我過去所使用的另一種jQuery庫:

jQuery BBQ: Back Button & Query Library

而且,以前更縮小版本,如果你並不需要所有它的功能,只是給你所有瀏覽器的hashchange事件:

jQuery hashchange event

注:正如一個簡短的介紹,以上述庫。 hashchange事件由更新的(HTML5支持的)瀏覽器本地支持,在這種情況下,腳本將僅綁定到該事件。對於不支持該事件的舊版瀏覽器,該腳本會創建一個輪詢循環來模擬事件。無論哪種情況,您都可以綁定到事件並進行適當的處​​理。

編輯:回答您的問題:

  1. 的鏈接不會觸發的JavaScript,鏈接只需更改URL與哈希值。 hashchange事件監視此操作,並且當哈希更改(記錄在瀏覽器歷史堆棧中)事件觸發時。
  2. location.hash用來讀取散列值,且任何適當的分析,你需要從該點。
  3. 也許不是SEO足夠精明,給你一個完整的答案,但相當肯定搜索引擎不索引哈希值。
  4. 優點對於該技術的可用性爲您的用戶將能夠正確地使用他們的後退按鈕。此外,任何history.back(0) JavaScript調用也將正常工作(我不喜歡他們,但人們使用它們)。缺點是,當你最初開發的時候,你可以根據你的代碼的寫法來得到一些奇怪的錯誤。總而言之,雖然,我認爲與使用多跑腿已取出的過程中的插件,它是可用性的目的一個偉大的方法。
4

爲了操縱井號標籤,看的location.hash(JavaScript的)。

您還可以在HTML 5 https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history感興趣的新推/彈出狀態的東西。

github做了一些非常酷的事情。在https://github.com/blog/760-the-tree-slider處查看他們的樹形滑塊功能上的博客條目。

也有的http://tkyk.github.com/jquery-history-plugin/ jQuery的歷史插件。 (編輯:我看到喬打我這一個)。

相關問題