Question

页面如何根据URL hash显示不同的内容？

我不是在谈论浏览器向下滚动以显示锚定部分，而是像JavaScript对该哈希做出反应并通过AJAX加载不同内容。

这是常见的还是可能的？

Answer 1

偶尔会这样做。 Youtube使用哈希链接到视频中的特定时间戳。

编辑：我原以为你可能会遇到一个问题，如果用户上升并手动编辑地址栏中的哈希值，页面就不会重新加载，甚至javascript也不会知道它发生了变化。我错了。我在Youtube上尝试过它。

Answer 2

哦，是的 - 当内容是由AJAX驱动时，它正在成为处理页面状态到URL持久性的常见模式。

Javascript可以通过window.location.hash访问此值。完成后，您可以根据该哈希值

执行任何操作

显示/隐藏节点
进行其他AJAX调用
更改页面标题或颜色
交换图片
等

真的，任何DHTML效果。

Answer 3

几周前我刚刚建立了一个系统来实现这个目标

依赖于你需要检测哈希的浏览器，继承人该怎么做

// test all possible places hash could be on different browsers
if(window.location.hash){
   hash = window.location.hash;
} else if (document.location.hash){
   hash = document.location.hash;
} else if (location.hash){
   hash = location.hash;
}

// some browsers start the hash with #, remove it for consistency
if(hash.substring(0,1) == '#'){
    hash = hash.substring(1,hash.length);
}

然后根据需要处理哈希变量的值以触发页面更改。

例如： http://www.example.com#pageA

if(hash = 'pageA'){
  document.getElementById('mainContentDiv').innerHTML = '<p> content for the page displayed when the hash sais pageA</p>';
}

Answer 4

Sammy是一个可以执行此操作的JavaScript库。

Answer 5

由于JavaScript可以访问URL字符串，因此它当然可以对网址的内容采取不同的行动。

我偶尔会看到类似的情况，但我不认为这是一种很好的反应方式，除非在非常具体的用途中。

我记得的一个用途是TiddlyWiki使用哈希的后部分来设置页面渲染的首选项等。

Answer 6

在AJAX繁重的应用程序（想想Gmail）中，相当常见的是能够拥有所有AJAXy内容，同时仍然可以为特定页面添加书签或将某人链接到特定页面。如果他们不这样做，那将被认为对可用性不利。通过执行window.location.hash来获取URL哈希相当容易 - 因此，如果存在哈希，则可以在页面加载时使用类似开关的语句来执行特定的Javascript函数集。

一些实现此功能的jQuery插件：history/remote，history。

Answer 7

这个问题的答案或多或少与我对这些问题的答案相同：

总之，您可能希望查看的两个项目解释整个hashchange过程并将其与ajax一起使用：

jQuery History（使用哈希来管理您的网页状态并绑定到更改以更新您的网页）。
jQuery Ajaxy（jQuery历史记录的ajax扩展，允许完整的ajax网站，同时完全不引人注目且可以优雅地降级）。

如果URL哈希值发生变化，页面是否会显示不同的内容？

7 个答案: