Question

我会非常具体。

我有一个前端...... http://www.eroticahub.site（不是色情片）

如果你有javascript，它会变成...... http://www.eroticahub.site/#!body=home [使用jquery / ajax加载渲染]

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

然后点击＆＃34;隐私＆＃34;在底部。

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

如果你没有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。有没有人有这个问题的清洁解决方案？

Answer 1

首先让所有内容都使用常规网址而不是JavaScript。你希望你的JS是unobtrusive，所以在一个有效的纯HTML +服务器端解决方案之上构建它。

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

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

注意：pushState替换了hashbang URI。它是为您描述的用例设计的标准（而hashbang是ugly hack）。

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

为listener添加popstate event，以便当用户点击返回时，您可以将页面恢复到之前的状态。

Answer 2

好。假设用户直接进入... eroticahub.site/privacy，然后点击链接转到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 html加载到网页中。

如果链接转到eroticahub.site/legal.html，后端将提供与eroticahub.site/privacy.html相同的模板，但其中间部分包含来自snippets / privacy.html的单词

如果用户有javascript，则中间部分呈现为与用户没有javascript相同。只有当用户点击链接时，必须区分他们是否有javascript。 AJAX必须在[替换] eroticahub.site/privacy的内容div中的静态内容之上加载动态内容（#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>

等

如何为网络抓取工具和单页面应用程序用户创建网站？

2 个答案: