多页与单页和不显眼的 Javascript答案

【问题标题】：Multipage vs Single Page and Unobtrusive Javascript多页与单页和不显眼的 Javascript
【发布时间】：2013-02-09 16:23:22
【问题描述】：

我有一个包含多个类别的小部件的网站部分。每个类别名称都有一个菜单。对于启用了 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、@987654328 @等

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

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

【问题讨论】：

somesite.com 是现有域；除非您是认真的，否则不要使用此类域； example.com 保留用作虚拟示例域。
我已经替换为example.com
这篇博文提供了一些见解，可以为解决方案提供一些进一步的想法jenitennison.com/blog/node/154
@newtriks 谢谢。那是一篇很棒的帖子。
我认为主要问题应该是“如果禁用 JS 的人登陆 example.com/widgets#two 会发生什么？

标签： javascript html navigation unobtrusive-javascript ujs

【解决方案1】：

这就是我的结构：

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

当用户点击链接时：

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

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

页面加载时：

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

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

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

你是这个意思吗？

【讨论】：

那么当一个启用了 Javascript 的客户端但一个不支持历史 API 的浏览器登陆 example.com/widgets/three 时你会怎么做？
如果有 JS 但没有历史状态的人访问 example.com/widgets/three 他们应该得到一个完整的页面。就您网站的结构而言，您的所有内容都应该可以通过完整的 URL 访问，您只需选择通过 ajax 加载它们。这有意义吗？
你能解释一下'整页'是什么意思吗？你的意思是他们得到一个页面的方式与有人在禁用 JavaScript 的情况下登陆页面的方式相同吗？
是的，如果没有 JavaScript，他们会得到相同的结果
看，这对我来说就像是逃避现实。这正是我发布这个问题的原因。谷歌将索引的所有链接都将指向这些完整页面，因此所有启用 JavaScript 的链接的人都会得到没有 JavaScript 的人会得到的糟糕体验。不要误会我的意思。这似乎是很多人做事的方式，但这意味着只有那些出现在索引页面上的人才能获得现代、单页、丰富的 JavaScript 体验。

【解决方案2】：

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

我需要任何启用 Javascript 的人都可以获得单页网站体验

然后问：

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

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

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

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

【讨论】：

这对我来说是一个糟糕的解决方案，因为它涉及加载两个单独的页面。如果可以在服务器端检测到用户代理的 JavaScript 功能，那就没问题了，但鉴于重定向必须是客户端，这很讨厌。不要误会我的意思。你很可能是正确的。我问这个问题是因为我认为这是一个有趣的问题，而不是因为一定有一个完美的答案。很可能这就是现实情况。
我明白，并用另一个建议更新了我的答案。我希望存在其他替代方案，让我们看看是否有人提出其他方法。
@Pedr 您的锚点 href 是否真的包含散列片段？我正在考虑另一种选择（实际上，我目前正在我正在开发的网站上使用）。如果您的链接指向 /widgets/one 之类的内容，您可以在可用时使用 js 手动将哈希添加到浏览器。然后页面的两个版本看起来都一样，尽管一个会使用 js/ajax 加载内容，而另一个通常会请求新的 url。实际上，这可能是最好的选择。
我计划使用一个使用 History API 的库，并且仅在浏览器不支持时才使用哈希（IE8 和 IE9）。因此，至少这些浏览器需要客户端重定向回 example.com/widgets。对于 History API 功能的浏览器，登陆 example.com/widgets/one 与登陆 example.com/widgets 并导航到 example.com/widgets/one 相比，在 URL 上看起来没有什么不同。

【解决方案3】：

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

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

【讨论】：

我对你的回答有点不清楚。你是在暗示他被服务于未增强的单页吗？如果是这样，你没有理解这个问题。
您稍后添加了有关多页与单页体验的部分。如果您不提供全部详细信息，如何理解您的要求？显然，如果这是您想要的，用户应该被重定向到启用了 javascript 的页面。那么问题是什么？
没有。那从一开始就在那里。添加了最后的说明。

【解决方案4】：

设计此类页面的一种方法是先不使用 javascript 进行设计。

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

example.com/widgets#one

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

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

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

【讨论】：