如何为网页爬虫和单页应用程序用户制作网站？

Question

我要说得非常具体。

我有个前卫..。http://www.eroticahub.site (非色情)

如果你有javascript，它就变成..。使用jquery/ajax加载的http://www.eroticahub.site/#!body=home呈现

如果你没有javascript，它仍然是..。http://www.eroticahub.site/

然后单击底部的“隐私”。

如果您有javascript，它将文件/body/privacy.html加载到主div中，然后得到.使用jquery/ajax加载的http://www.eroticahub.site/#!body=privacy呈现

如果你没有javascript，你只能.body.html

^我只是获取jquery/ajax插入到模板中的文件。

这不是一个很好的解决方案。我想要一个页面，从来不做一个完整的刷新/重新加载，但这是完全索引的每一个主要搜索引擎。

是否可以发出这样的命令：

For each link in page, 
  if ( user_has_javascript )
    return page_with_javascript;
  else
    return serverside_render( page_with_javascript );

这样，任何没有javascript (包括web爬虫)的用户都会得到页面的纯html/css版本。我计划在后端使用Ruby。有没有人对这个问题有干净的解决办法？

Answer 1

首先，让一切正常的URL，而不是JavaScript工作。您希望您的JS是不显眼，所以在一个实用的、普通的HTML +服务器端解决方案的基础上构建它。

接下来，编写JavaScript，从服务器获取它需要的数据，并更新文档以匹配另一个页面。

JavaScript应该使用pushState来更改URL，以与您在本地使用JavaScript生成的服务器中的页面URL相匹配。

注：pushState取代hashbang URIs。它是为您描述的用例设计的标准(而哈希班斯是一个http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs)。

将该JavaScript绑定到您的链接中，单击/ form submit / etc事件。

为一个监听程序添加一个波波状态事件，以便当用户单击Back时，您可以将页面恢复到以前的状态。

Answer 2

好吧。假设一个用户直接去..。网站/隐私，然后点击一个链接到eroticahub.site/legal链接如下：

<a href=eroticahub.site/legal.html onclick=function(){window.location.hash = 'legal.html';return false;}> 
    Link 
</a>

因此，如果用户没有javascript，他们会转到eroticahub.site/legal.html，并从服务器请求一个全新的页面，如果他们有javascript，则转到eroticahub.site#legal.html，不会从服务器请求一个全新的页面。

该#将触发一个哈希更改事件，该事件将调用一个包含(window.location.hash === "legal.html")的大开关语句的函数。此条件将触发使用jquery/ajax将代码片段/legal.html加载到网页中。

如果链接转到eroticahub.site/legal.html，后端将提供与eroticahub.site/privacy.html相同的模板，但另一个中间部分包含代码片段/Privacy.html中的单词。

如果用户有javascript，则中间部分的呈现方式与用户没有javascript一样。只有当用户单击一个链接时，无论他们是否有javascript，都必须做出区分。AJAX必须在替换eroticahub.site/隐私的content中的静态内容的基础上加载动态内容(#legal)，然后用完全相同的div中的更多html替换then中的静态内容。必须维持一项公约，以便：

<a href=eroticahub.site/legal.html onclick=function(){window.location.hash = 'legal.html';return false;}> 
    Link 
</a>

<a href=eroticahub.site/privacy.html onclick=function(){window.location.hash = 'privacy.html';return false;}> 
    Link 
</a>

<a href=eroticahub.site/user_content/stories.html onclick=function(){window.location.hash = 'user_content/stories.html';return false;}> 
    Link 
</a>

等。