将哈希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中文网其他相关文章！