哈希碎片與服務器端代碼衝突

Question

我有一個網站，用戶在其中選擇一系列字母和數字，並將其帶到基於此的新頁面。

因此，它可能帶他們去/cds/C_1_3_A_2

沒有實際C_1_3_A_2頁面在cds目錄中，我有一個重寫規則：

RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 
RewriteRule ^cds/(.*) /cds/index.html [L] 

所以如果請求的文件不存在，它會被重寫爲index.html，其中一個php腳本獲取URL的最後一個組成部分（C_1_3_A_2），並加載相關內容，如果URL的最後一個組件是/cds，那麼PHP腳本會重定向到/cds/C_1_1_A_1

但是我想添加AJAX使其更平滑，這意味着我需要添加對散列碎片的支持，因爲舊版瀏覽器不支持history.pushState。

因此，如果用戶去自行/cds/#C_1_3_A_2，它應該是一樣/cds/C_1_3_A_2

但作爲片段不被髮送到服務器，用戶最終成爲/cds/C_1_1_A_1#C_1_3_A_2，並得到相關的內容到C_1_1_A_1，而不是C_1_3_A_2，因爲他們打算。

由於PHP是服務器端，它在Javascript可以處理片段之前執行，並且我不希望用戶通過PHP腳本重定向，然後通過javascript返回。

那麼如何添加對散列碎片的支持呢？其他網站如何處理這個問題？

Answer 1

如果您查看使用散列的頁面請求的標題，散列部分甚至不會發送到Web服務器。因此，php或apache都不知道散列是否存在。如果沒有「最後一個組件」，你可能最好只加載索引頁面而不重定向，然後通過javascript將默認值設置到散列中。

Answer 2

您需要將更多內容移動到前端。通常情況下，如果鏈接只包含一個散列片段，它們將不會觸發新的請求（但可能會導致跳轉到屏幕頂部，如果需要可以處理）。這聽起來好像你在這裏的問題可能是添加「/」。如果您希望在鏈接中使用該頁面，該頁面應該已經具有「/」，並且鏈接應該僅包含哈希。

處理此問題的最佳方法是綁定到較新瀏覽器支持的window.hashchange事件。將會有老式瀏覽器可用的polyfills。當hashchange事件被觸發時，您可以檢索新URL的哈希位置，然後使用它來對後端執行Ajax請求。

理想情況下，可以修改後端，以便以某種形式添加參數（如?partial=true），因此只返回可添加到頁面的內容（沒有任何形式的周圍佈局）。這應該是唯一需要的後端改變。否則，爲了開始，您可以使用JavaScript從檢索到的數據中提取內容並將其集成到頁面中（但在完成內容轉移時應該只是臨時性的）。