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

时间:2011-02-16 07:49:15

标签: javascript html5 browser-history html5-audio background-music

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

我使用html5历史api和hashbang(#!)后备来在点击主页面中加载各种内容。并且加载的URL也指向包含内容的页面。

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

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

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

任何想法/建议/解决方法?

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

1 个答案:

答案 0 :(得分:3)

Hash-bang#!网址的可以被Google编入索引,这就是他们的全部意义,否则人们就会自己使用哈希#。

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

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

我认为使用这两种类型的URL并不是一个好主意,因为用户在同一页面上有两个URL发布在博客,Twitter等上,编写代码也是一场噩梦可靠地处理它。你可能不得不暂时解决哈希爆炸问题,直到HTML5历史API得到更广泛的支持。