Question

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

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

我希望访问者不仅可以为#videos标签添加书签，还可以为特定视频添加书签。

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

Answer 1

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

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

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

Answer 2

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

如果您正在为视频添加书签，那么自然就是URL会引导视频，如果您需要在页面中显示特定的标签，则应该拥有识别视频锚点的代码并显示正确的标签。

Answer 3

在#之后解析网址片段的正则表达式是这样的：

(#(.*))?

这意味着每个角色都可以传递。所以，选择以下两种方法之一：

将第一个后的所有哈希值转换为＆＃39;％23＆＃39;。您还需要为所有不可接受或保留的字符执行此操作（转换为％HEX eq。）。 例如：http://domain.com/app#first%23second
使用多个哈希并在应用中处理它！第一个很容易，但可能无法在您的特定应用中实现。

请参阅this doc以确保#之后的有效字符。

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"事件，以防有人在您的网页上复制/粘贴特定视频的网址（例如，使用不同的哈希）：

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

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

4 个答案: