跨“页面加载”无缝播放音乐的理想解决方案？使用 javascript 加载页面答案

【问题标题】：Ideal solution for seamless music playback across "page loads"? Using javascript to load pages跨“页面加载”无缝播放音乐的理想解决方案？使用 javascript 加载页面
【发布时间】：2011-06-28 04:20:44
【问题描述】：

我正在开发一本在线音乐杂志。我们有一个 html5/flash 音乐播放器，它构成了网站的主要部分。但该网站也有很多文章和东西。所以基本上，我希望跨页面加载无缝音乐播放，但我也希望避免使用完整的 javascript 应用程序，因为我希望所有内容在 Google 中都是蜘蛛友好和可索引的。

我使用带有 hashbang (#!) 后备的 html5 历史 API 来在点击时加载主页内的各种内容。加载的 URL 也指向包含内容的页面。

例如：我的索引页 munimkazia.com 中的 munimkazia.com/page1.html 链接将从 page1.html 加载内容并插入它。 URL 将在 firefox 和 IE 中更改为 munimkazia.com/#!/page1.html，在 chrome 中更改为 munimkazia.com/page1.html。由于 href 链接是 munimkazia.com/page1.html，蜘蛛将跟随链接并获取内容。我在 page1.html 中正确设置了页面，可以查看了。但是现在，我有问题。

如果我决定在此页面上使用 ajax 加载，浏览器位置栏上显示的 URL 将与 hashbang 回退不一致 (http://munimkazia.com/page1.html/#!/page2.html) 如果我决定将所有点击重定向到http://munimkazia.com 的主容器页面并加载 page2.html，此后一切正常，但此页面加载将中断之前的音乐播放（如果有）。

另外，我不想将所有 http://munimkazia.com/page1.html 重写为 http://munimkazia.com/#!/page1.html，因为我希望所有内容都存在，而不是由 javascript 获取和写入以供搜索引擎蜘蛛阅读。我知道谷歌有一个规范来阅读 #! URL，但我希望页面加载用户的文章内容，即使 JS 被禁用

有什么想法/建议/解决方法吗？

编辑：这些网址只是解释我的观点的例子。 munimkazia.com 上没有用于获取页面的 javascript 代码

【问题讨论】：

标签： javascript html browser-history html5-audio background-music

【解决方案1】：

哈希爆炸#！ URL 可以被 Google 索引，这就是它们的全部意义，否则人们只会自己使用哈希 #。

我认为这个想法是谷歌看到的是#！ URL 并将其转换为查询字符串参数，例如。 example.com/#!/products/123/ipod-nano-32gb 变为 example.com/?_escaped_fragment_=/products/123/ipod-nano-32gb 但用户仍然使用 hash-bang URL。您对服务器进行编程以响应 ?_escaped_fragment_ 参数，但 JavaScript 用户会被重定向到正确的 #!网址。

在此处查看 Google 规范 http://code.google.com/web/ajaxcrawling/docs/getting-started.html

我不认为同时使用这两种类型的 URL 是一个好主意，因为您将有两个 URL 被用户发布在博客、Twitter 等上的同一页面上，编写代码也是一场噩梦可靠地处理它。在 HTML5 History API 得到更广泛的支持之前，您现在可能不得不接受 hash-bangs。

【讨论】：

我认为两者都使用是个好主意，因为可以与历史 API 一起使用的常规 URL 要好得多。您可以使用规范链接帮助 Google 实现两个 URL 指向相同的内容。
公平点，但我的问题是 Chrome/Safari 用户会发布 /products/123/ipod-nano 链接，而 FF 和 IE 用户会发布 /#!/products/123/ipod-nano。但是，如果您可以解决 URL 规范化问题，并且疯狂的架构代码需要支持这一点，那么它也许可以工作。但是，Twitter 和 Facebook 等网站决定不打扰，我想知道为什么？
我知道 Google 的 ajax 抓取规范，我有点认为这是最后的手段，因为没有其他搜索引擎支持该规范。此外，facebook 确实使用 History API。尝试在 chrome 中打开新闻源中的照片，您的浏览器 URL 将更改为 photo.php。在 Firefox 中，它添加了一个 #!，但它在 chrome 中使用了历史 API。试一试:)
我刚想起另一个主要问题，我在考虑唯一的#！方法。如果我决定将所有 munimkazia.com/page1.html 重定向到 munimkazia.com/#!/page1.html 以加载主容器并通过 ajax 加载页面，如果禁用 JS，一切都会失败。如果 JS 被禁用，我至少希望页面与文章一起加载
如果你只是想获得谷歌等。要抓取常规 URL，那么您不需要 hash-bang URL，只需使用 hash #，因为 Google 看到的是 #！并将尝试执行您所说的其他搜索引擎不支持的 escaped_fragment 事情。我并没有说同时使用这两种方法是不可能的，只是非常困难，但祝你好运。我可能会以渐进增强的方式来处理它，用正常的 URL 构建一个常规的站点，执行常规的 GET 请求，添加 History.pushstate 支持，逐渐添加#fragment 支持等。