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

How do you make website for both web crawlers and single page application users?

本文关键字：用户 应用程序 网站 单页 网络 爬虫      更新时间：2023-09-26

我将非常具体。

我有一个前端。。。http://www.eroticahub.site（非色情）

如果你有javascript，它就会变成。。。http://www.eroticahub.site/#！body=home[使用jquery/ajax-load渲染]

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

然后你点击底部的"隐私"。

如果您有javascript，它会将文件/body/privacy.html加载到主div中，然后您会得到。。。http://www.eroticahub.site/#！body=privacy[使用jquery/ajax-load渲染]

如果你没有javascript，你只会得到。。。http://www.eroticahub.site/body/privacy_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（包括网络爬虫）的用户都将获得纯html/css版本的页面。我正计划使用Ruby作为我的后端。有人能解决这个问题吗？

首先让所有东西都能使用常规URL而不使用JavaScript。您希望您的JS不引人注目，所以在一个可工作的、简单的HTML+服务器端解决方案之上构建它。

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

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

注意：pushState替换hashbang URI。这是为您描述的用例设计的标准（而hashbang是一个丑陋的破解）

将该JavaScript绑定到您的链接点击/表单提交等事件。

为popstate事件添加一个监听器，这样当用户单击Back时，您就可以将页面恢复到以前的状态。

好的。假设用户直接进入…色情网站/隐私，然后点击链接进入色情网站/合法链接如下：

<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并不会从服务器请求全新的页面。

#将触发一个散列更改事件，该事件将调用一个带有大switch语句的函数，该语句将包含（window.location.hash=="legal.html"）。此条件将触发使用jquery/ajax将snippet/legal.html html加载到网页中。

如果链接指向eroticahub.site/legal.html，后端将提供与eroticahhub.site/privacy.html相同的模板，但中间部分不同，包含snippets/privacy.html 中的单词

如果用户有javascript，则中间部分的呈现方式与用户没有javascript的呈现方式相同。只有当用户单击链接时，才必须区分他们是否有javascript。AJAX必须在eroticahub.site/privacy的contentdiv中[替换]静态内容之前加载动态内容（#legal），然后这将被完全相同的div中的更多html替换

<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>

等等。

相关文章：