2011-11-04 20 views
1

除非這種方式是HTML 5,我可以很容易地使用history.pushState()來處理URL時AJAX加載額外的一塊頁,我覺得不方便處理與哈希標記在註冊頁面網址地址欄。更好地處理散列網址AJAX網站

例如,頁面item1.html被加載。用戶點擊下一個項目 - item2.html頁面加載了AJAX。地址在瀏覽器中更改爲item1.html#item2.html。

現在,當用戶發送這個URL給朋友或書籤,我想確保item2.html被加載。

方法1)JavaScript會將URL item1.html#item2.html重定向到item2.html。缺點:item1.html加載並在重定向前閃爍一秒。

方法2)加載item1.html並隱藏item1內容,然後用Ajax請求加載item2.html。缺點:物品1的內容仍然可以看到

更好的方法(除非我有可能爲SE我們不好的知名度沒有隱藏它)?我錯過了許多大型網站實施的一個很好的解決方案。

+0

爲什麼不能使用pushState將URL更改爲item2.html? –

+0

我將它用於HTML 5瀏覽器。但是IE呢?和其他舊版瀏覽器? – Vad

+0

做什麼github做。不要使用ajax,併爲低劣的瀏覽器執行* real *重定向。 IE是現在唯一的「舊版瀏覽器」,現在Firefox幾乎可以自動更新和Chrome自動更新。無論如何,任何使用IE6的人都不值得擁有順暢的體驗。 –

回答

0

請不要將#部分視爲文件的網址。這是一個邏輯狀態的頁面是。

爲了你,我認爲這意味着有像page.html中,這可能對自己的沒有真正的內容。然後你有page.html#item1和page.html#item2等。這些網址始終保持一致。你永遠不會直接導航到item1.html或item2.html。

+0

搜索引擎呢?如果item1是AJAX調用,而page.html是空的,那麼網站就會被擰緊。 – Vad

+1

我首先做所有沒有js的工作,然後添加js特性([unobtrustive js](http://en.wikipedia.org/wiki/Unobtrusive_JavaScript))。在這種情況下,您可以避免搜索引擎爬蟲問題,並且啓用js的用戶可以獲得更方便的網站版本。所以在你的情況下,你的正常鏈接將是'Next'。然後在dom加載後追加你的ajax行爲。 – mAu

+0

偉大的建議和我已經沒有JS完成我的網站。現在我應用動態功能。問題是使用什麼方法。 – Vad

0

如IL上文所述,您希望您的AJAX應用程序(文件立即散列標籤前面的網址,例如:page.html中)的「外殼」,作爲沒有什麼比它加載item1.html的容器更,item2.html等通過AJAX。爲了確保在用戶第一次到達應用程序時將哈希標記後引用的資源加載到空殼中,您需要在window.onload(或$(document).ready()if處調用函數if您正在使用jQuery),它將location.hash讀入相應的AJAX調用中,如果location.hash未定義,空白或返回AJAX錯誤的值,則使用默認方案。

爲了「美化」您的網址以便於在搜索引擎中輸入和編制索引,您需要在網站根部設置一個.httaccess文件,用於將乾淨網址(例如:http://example.com/item1)重寫爲文件位置與散列值(例如:http://example.com/page.html#item1),以便您的引擎可以理解它並加載適當的資源。