如果URL哈希值改变，页面能否显示不同的内容？

Question

如何根据URL哈希在页面上显示不同的内容？

我不是指浏览器滚动以显示锚定部分，而是像JavaScript一样通过AJAX反应到哈希并加载不同的内容。

这种情况常见吗，甚至可能吗？

- Robin Rodricks

Answer 1

我几周前刚建立了一个系统来完成这个任务

根据浏览器的不同，你需要检测哈希值，以下是如何实现：

// 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>';
}

- Fire Crow

---

真 == (location.hash === window.location.hash) - Will Morgan

哦，是的，我想这是真的，假设窗口是全局命名空间，在浏览器中是正确的。 - Fire Crow

Answer 2

这种情况偶尔会出现。Youtube使用哈希值链接到视频中特定的时间戳。

编辑：我曾经认为，如果用户在地址栏中手动编辑哈希值，页面不会重新加载，甚至JavaScript也无法知道它已经改变了。但我错了。我在Youtube上试过了，它可以正常工作。

- Licky Lindsay

---

onhashchange在IE8中得到支持，但大多数浏览器可以使用setInterval来实现检测手动片段标识符更改。 - Jason Harwig

@Jason：这里有一段代码片段可以实现你想要的功能：https://dev59.com/_UbRa4cB1Zd3GeqP4NMc#629817 - Christoph

Answer 3

是的 - 当内容是通过AJAX驱动时，处理页面状态到URL持久性已成为一种常见模式。

Javascript可以通过window.location.hash访问此值。完成后，您可以根据哈希值执行任何操作

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

实际上，任何DHTML效果都可以。

- Peter Bailey

Answer 4

Sammy是一个JavaScript库，它可以实现这一点。

- Jim Hunziker

Answer 5

这个问题的答案与以下问题的答案或多或少相同：

• 如何在URL中显示Ajax请求？
• Gmail如何在丰富的JavaScript中处理后退/前进？

总之，你可能想要查看的两个项目是：

• jQuery History（使用哈希来管理页面状态并绑定更改以更新页面）。

• jQuery Ajaxy（jQuery History的ajax扩展，允许完全的ajax网站同时完全无侵入和优雅降级）。

- balupton

Answer 6

由于JavaScript可以访问URL字符串，因此它当然可以针对URL内容采取不同的操作。

我偶尔看到过这样的东西，但我认为除非在非常特定的用途中，否则这不是一种好的反应方式。

我记得其中一个用途是TiddlyWiki使用哈希的后部分来设置页面呈现和其他方面的首选项。

- Kosi2801

Answer 7

在 AJAX-heavy 应用程序（比如 Gmail）中，让所有 AJAXy 的东西都能够被书签或链接到特定页面是相当普遍的。如果他们不这样做，那么这将被认为是对可用性的不利影响。通过执行 window.location.hash，很容易获取 URL 哈希 - 因此，您可以在页面加载时使用类似于 switch 的语句来执行特定的 JavaScript 函数集，如果哈希存在。

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

- Paolo Bergantino