將哈希URL與jQuery示例一起使用

如今，許多現代的網絡應用都使用哈希網址 要在頁面上添加唯一性（例如頁面標籤，部分，操作等），而無需刷新它可以識別它。這是從使用jQuery獲取URL參數將動態數據傳遞到通過URL傳遞到頁面的。它仍然在www上廣泛使用。

window.location.hash vs document.url

讓我們快速看一下這兩個正則是正則您可以使用它來抓住哈希標籤。

<span>//using window.location.hash
</span>$<span>.fn.urlHash = function()
</span><span>{
</span>  <span>return window.location.hash.replace('#','');
</span><span>};
</span>$<span>.urlHash();</span>

重要的是：location.hash對IE不安全（包括IE9）。另外，如果您的頁麵包含一個iFrame，則在手動刷新IFRAME內容內的手動刷新後獲取舊位置。 hash值（首頁加載），而手動檢索值則與位置不同。

<span>//IE Proof - URL Hash Grab - returns complete hash value
</span>$<span>.fn.urlHash = function()
</span><span>{
</span>  <span>return document.URL.substr(document.URL.indexOf('#')+1);
</span><span>};
</span>$<span>.urlHash();</span>

因此，作為提取Dayofweek Hash標籤值的示例，您會這樣做：

<span>//in context - extract dayofweek hash
</span><span>//eg  url#dayofweek1 would return 1
</span><span>if (document.URL.indexOf('#dayofweek'))
</span><span>{
</span>    week <span>= parseInt(document.URL.substr(document.URL.indexOf('#')+1).replace('dayofweek',''))-1;
</span>    $resParent<span>.eq(week).showResources();
</span><span>}</span>

>另一種不錯的方式

這是使用較重的正則表達式的另一種體面方法（磅標牌是可選的，因為.match（）永遠不會返回null）。

<span>var match = location.hash.match(<span>/<span>^#?(.*)$</span>/</span>)[1];
</span><span>if (match)
</span><span>{
</span>   <span>//do stuff...
</span><span>}</span>

失敗…

<span>var hash = location.hash.match(<span>/#<span>(w+)</span>/</span>)[1];</span>

問題：當哈希中有任何非拉丁蛋白或非針源性特徵時，返回錯誤的結果。例如，對於Hash＃foo@o＃bar $％huh hello hello，只需返回“ foo”。 location.hash為空時拋出typeError，因為.match（）將返回null

<span>var hash = location.hash.split('#')[1];</span>

通過相同的測試哈希，它至少會得到“ foo@o”部分，這意味著只有在哈希包含磅標誌時才失敗。當沒有哈希時，它不會丟失錯誤，儘管它返回未定義而不是空字符串。

參考材料

獲取您的哈希 - 防彈方式

經常詢問有關哈希url

的問題（常見問題解答）

什麼是哈希url，為什麼重要？

> hash url是一個包含哈希（＃）符號的URL，後跟標識符。該標識符用於指向網頁中的特定部分。哈希URL很重要，因為它們允許用戶直接導航到頁面上的特定內容，而無需滾動整個頁面。這對於具有多個部分的長網頁特別有用。此外，可以使用哈希url來維持在單頁的Web應用程序中的狀態，其中哈希更改以反映當前視圖。

>

>如何創建哈希url？ URL非常簡單。您需要做的就是附加哈希（＃）符號，然後是您的URL標識符。例如，如果您在www.example.com上有一個頁面，並且要創建一個指向“ extiral1”部分的哈希url，則您的哈希url將是www.example.com＃pection1。

>如何使用jQuery操縱哈希url？ “位置”對象的“哈希”屬性可用於獲取或設置URL的哈希部分。例如，要將哈希設置為“第1節”，您將使用location.hash ='Section1';。要獲取當前的哈希，您將使用var hash = location.hash;。

>我可以將hash urls用於ajax導航嗎？

是的，可以將hash urls用於ajax導航。通過更改哈希，您可以加載不同的內容而無需刷新頁面。這通常在單頁應用程序中用於創建流暢的用戶體驗。

>如何檢測jQuery的哈希更改？

jQuery提供'Hashchange'事件，每當hash觸發時更改。您可以在哈希更改時使用此事件運行代碼。例如，$（window）.on（'hashchange'，function（）{ / *您的代碼在此處 * /}）;。

>使用哈希urls？雖然哈希網址可能非常有用，但仍有一些缺點。一個主要的缺點是，它們可能會引起搜索引擎優化（SEO）的問題，因為搜索引擎可能無法索引與哈希相關的內容。此外，哈希url可能會引起分析問題，因為它們並不總是被跟踪為單獨的頁面視圖。

我可以使用帶有錨標籤的哈希url嗎？

是的，是的，hash url經常被用於hash urls。錨定標籤創建“跳躍鏈接”，允許用戶直接導航到頁面的特定部分。 URL中的哈希對應於錨標記的“ ID”屬性。

>

>如何使用jQuery？

>您可以從URL中刪除哈希> >我可以使用hash url存儲狀態信息嗎？這通常用於單頁應用程序，其中應用程序的狀態存儲在哈希中。這允許用戶通過使用返回按鈕或通過為URL添加書籤來導航回同一狀態。

>

>我如何使用hash url進行深層鏈接？

>深層鏈接是使用URL直接導航到頁面中的特定內容。哈希網址是完美的，因為它們允許您直接鏈接到頁面的特定部分。要使用哈希url進行深層鏈接，只需將本節的哈希和標識符附加到您的URL。

以上是將哈希URL與jQuery示例一起使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！