10

我有一个包含多个类别的小部件的网站部分。每个类别名称都有一个菜单。对于启用了 Javascript 的任何人，单击一个类别会显示页面内该类别的内容。他们可以随意在类别之间单击，看到 DOM 根据需要更新。url 也使用标准哈希/hashbang 更新（如果我们对 Google 友好）。因此，对于登陆 的人example.com/widgets，他们可以导航到example.com/widgets#one,example.com/widgets#two等example.com/widgets#three。

但是，要支持未启用 Javascript 的用户代理，遵循这些类别链接之一必须加载显示类别的新页面，因此对于未启用 javascript 的人，他们将导航到example.com/widgets/one、example.com/widgets/two等example.com/widgets/three。

我的问题是：当启用了 Javascript 的人登陆这些 URL 之一时会发生什么？例如，启用 Javascript的用户在登陆时应该看到什么？他们应该被重定向到?example.com/widgets/oneexample.com/widgets#one

请注意，我需要为启用了 Javascript 的任何人提供单页站点体验，但我希望为没有 JavaScript 的用户代理提供多页站点。任何不解决这个事实的答案都不能回答这个问题。我对 hashbang 或单页站点与多页站点的优点或问题不感兴趣。

4

4 回答 4

6

这就是我将如何构建它：

使用HistoryJS来管理 URL。JS pushstate 浏览器得到完整正确的 URL，JS 非 pushstate 浏览器得到散列 URL。非 JS 用户通过重新加载页面正常访问完整 URL。

当用户点击链接时：

如果他们有 JS： 对其他页面的所有点击都由阻止默认操作的函数处理，获取 HREF 并将 URL 传递给 ajax 请求并同时更新 URL。然后解析该 ajax 请求的 http 响应，然后将其加载到内容区域。

非 JS： 页面正常刷新并加载整个文档。

当页面加载时：

使用 JS：将事件处理程序附加到所有链接以防止默认链接，以便通过 Ajax 处理它们的 href。

没有 JS：什么都没有。允许锚点正常工作。

我认为您绝对应该通过完整、正确的 URL 访问您的所有内容，并通过 ajax 将其加载，然后更新 URL 以反映您从中获取内容的地址。这样，当 JS 不运行时，您无需更改任何内容。

你是这个意思吗？

于 2013-03-03T16:40:54.113 回答
2

显然你的问题已经包含了答案。你说：

我需要启用 Javascript 的任何人的单页网站体验

然后问：

例如，启用 Javascript 的用户在登陆时应该看到example.com/widgets/one什么？他们应该被重定向到example.com/widgets#one?

我会说是的，他们应该被重定向。鉴于您的要求（以及有关 JavaScript 功能和 URL 哈希片段的信息在服务器端不可用的事实），我没有看到任何其他选项。

如果您可以接受稍微放宽要求，我会看到另一种选择。还记得当网络上挤满了框架集时，我们通过 AltaVista（Google 还没有出现！）搜索进入了一个特定的框架？通常会看到一个标题说该页面应该显示为一个框架，以及一个将用户带到框架集版本的链接。

您可以做类似的事情：当脚本可用时，检测到您所在的位置example.com/widgets/one并添加指向单页版本的链接。我知道这并不理想，但总比没有好，也许比讨厌的客户端重定向要好。

于 2013-02-27T17:15:15.377 回答
0

为什么需要将它们重定向到不同的页面。用户到达页面寻找答案。即使他启用了 javascript，他也会得到答案。没关系。用户的查询已完成。

但是如果用户登陆 example.com/widgets#one 会发生什么？在这种情况下，您需要设置一个自动重定向到 example.com/widgets/one。这可以通过检查onload事件中是否启用了 javascript 并重定向到适当的页面来完成。

于 2013-02-27T04:38:56.893 回答
0

设计此类页面的一种方法是首先在没有 javascript 的情况下进行设计。

您可以在页面中使用锚点：

example.com/widgets#one

将是指向 id 为“one”的元素的链接

一旦您的页面在没有 javascript 的情况下工作，然后您添加 javascript 层。您可以使用 event.preventDefault 阻止链接被跟踪。

( https://developer.mozilla.org/fr/docs/DOM/event.preventDefault )，然后添加所需的 javascript 功能。

于 2013-03-03T15:09:00.070 回答