在 URL 中使用多个片段标识符

Question

我想知道是否可以在 url 中使用多个片段标识符，有点像这样： http://example.com/videos/index.html#videos#video_2

我在我的index.html 页面上使用jQuery Tools 选项卡系统以及历史记录插件。此页面的“视频”选项卡上有一个 Flash 视频播放器和视频列表。单击视频缩略图会将文件加载到播放器中。

我希望访问者不仅能够为 #videos 选项卡添加书签，还能够为特定视频添加书签。

我认为 URL 中包含两个片段标识符是实现此目的的方法是完全错误的吗？

Answer 1

我很确定双锚链接是不可能的！

您可以在 URL 的查询字符串中放置指向正确选项卡和视频的指针（例如 mysite.com/videos/index.html?tab=video&video=2），然后在 JavaScript 中解析它。然后可以将其添加为书签。

但是，您是否不能坚持使用原始模型（使用单个 # 锚链接），然后简单地使用 JavaScript 查找该标签所在的选项卡，从而显示正确的选项卡？

Answer 2

不可以，您不能在一个 URL 中使用多个主题标签。哈希字符后面的标识符指向页面上的书签锚点，并且只能转到一个锚点，不能同时转到两个锚点。

如果您为视频添加书签，很自然的情况是 URL 会指向该视频，并且如果您需要在页面中显示特定选项卡，您应该拥有能够识别视频锚点并显示正确选项卡的代码。

Answer 3

解析#后面的URL片段的正则表达式是这样的：

(#(.*))?

表示每个字符都可以传递。所以，
选择这两种方法之一：

1. 将第一个之后的所有哈希值转换为“%23”。您还需要对所有不可接受或保留的字符执行此操作（转换为 %HEX eq.）。
   例如：http://domain.com/app#first%23second
2. 使用多个哈希值并在应用程序中进行处理！
   第一个很简单，但可能无法在您的特定应用程序中实现。

请参阅此文档以确保#<之后的有效字符/代码>。

Answer 4

一个简单的方法是使用这样的链接：

index.html#video_2

然后解析哈希以获取视频的 ID：

if (location.hash.indexOf("#video_" === 0)) {
    var index = location.hash.indexOf('_')
    var id = location.hash.substring(index + 1)
    // use jQuery to click the 'videos' tab
    // load the video with id
}

您还可以收听 "hashchange" 事件，以防万一有人在您的网页上复制/粘贴特定视频的 URL（例如，不同的哈希值）：

window.addEventListener("hashchange",function(event){
    // check hash for video with ID
});