3

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

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

这是常见的还是可能的？

4

7 回答 7

2

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

编辑：我曾假设您可能会遇到一个问题，如果用户在地址栏中手动编辑哈希，页面不会重新加载，甚至 javascript 也不会知道它已更改。我错了。我在 Youtube 上试过，效果很好。

于 2009-06-02T17:55:59.400 回答
2

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

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

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

真的，任何 DHTML 效果。

于 2009-06-02T17:57:12.220 回答
2

几周前我刚刚建立了一个系统来做到这一点

取决于您需要检测哈希的浏览器，这是如何做到的

// 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>';
}
于 2009-06-02T17:57:32.483 回答
2

Sammy是一个 javascript 库，它就是这样做的。

于 2009-06-03T00:15:34.357 回答
1

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

我偶尔会看到这样的事情，但我认为这不是一种很好的反应方式，除非在非常特定的用途中。

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

于 2009-06-02T17:56:00.833 回答
1

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

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

于 2009-06-02T17:56:54.793 回答
1

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

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

  • jQuery 历史（使用哈希来管理您的页面状态并绑定到更改以更新您的页面）。

  • jQuery Ajaxy（jQuery History 的 ajax 扩展，允许完整的 ajax 网站，同时完全不显眼并且可以优雅地降解）。

于 2010-08-28T17:02:52.440 回答