【问题标题】:Check if Javascript is Enabled (Serverside) with Rails检查是否使用 Rails 启用了 Javascript(服务器端)
【发布时间】:2011-01-19 21:56:53
【问题描述】:

如何检查 Rails 中是否启用了 javascript?这样我就可以在视图中做这样的事情:

<div>
    <% if javascript_enabled? %>
    <p>Javascript Enabled!</p>
    <%- else -%>
    <p>No Javascript</p>
    <%- end -%>
</div>

【问题讨论】:

  • 你的意思是你的服务器是否可以运行Javascripts?如果没有,你根本就做不到。
  • 你不能在服务器端,但这里有一个简单的 Rails 解决方案:Ruby on Rails javascript detection

标签: javascript ruby-on-rails server-side erb noscript


【解决方案1】:

你可以检测到它,但它并不漂亮。

首先,您需要一个具有更新会话超时操作的新控制器:

class JavascriptController < ApplicationController
  def confirm
    session[:javascript_updated] = Time.now
  end
end

接下来,您需要在所有页面中包含一个 javascript 操作,以便在每次页面加载时调用此控制器操作。最简单的方法是将它包含在布局中包含的“javascript-confirm.js”文件中(在这个特定示例中,我使用了 Prototype 的 Ajax.Request,因此您也需要将它包含在您的 javascripts 中):

function confirmJavascript()
{
    // Assuming you are using Prototype
    new Ajax.Request('/JavascriptController/confirm');
}

myTimeoutFunction();
setInterval(myTimeoutFunction, 10000); // invoke each 10 seconds

这将在您的所有页面视图中调用确认操作。最后,您必须控制自上次在应用程序控制器中确认以来经过了多长时间。

class ApplicationController < ActionController::Base

JAVASCRIPT_TIME_LIMIT = 10.seconds

before_filter :prepare_javascript_test

private
def prepare_javascript_test
  if (session[:javascript_updated].blank? or
     Time.now - session[:javascript_updated] > ApplicationController::JAVASCRIPT_TIME_LIMIT)
    @javascript_active = true
  else
    @javascript_active = false
  end
end

end

您现在将在所有控制器中拥有一个名为 @javascript_active 的变量。

即使用户激活/停用 javascript,它也应该可以工作,精度为 10 秒。如果您的某些页面加载时间超过 10 个页面(即包含大量图像),它可能无法正常工作。在这种情况下增加时间限制(在 applicationcontroller 和您的 javascript 上)

免责声明:我尚未测试此代码,可能存在一些错误 - 但它应该为您指明正确的方向。

【讨论】:

    【解决方案2】:

    如果这是您想要的全部,最好将非 JS 版本放在视图中:

    <p class="replace_by_js">No Javascript</p>
    

    然后让 Javascript 替换它:(我使用 jQuery)

    $('p.replace_by_js').replaceWith("<p>Javascript Enabled!</p>")
    

    这种方法几乎可以用于您想要添加的任何渐进式增强。

    【讨论】:

      【解决方案3】:

      无需编写大量代码来检查您的 javascript 是否启用,您只需在页面布局中编写 as(使用 HAML) -

      %p.javascript_require
        No javascript, please enable JavaScript
      

      并使用 hide() 函数让您的 javascript 隐藏此段落 -

      $(".javascript_require").hide();
      

      在禁用 javascript 时执行您想要执行的任何功能。

      【讨论】:

        【解决方案4】:

        在呈现响应期间这是不可能的。确定更不可靠或更可靠的唯一方法是让客户端在先前的请求之一中预先发送一个ajaxical请求。然后,这个 ajaxical 请求应该在服务器端会话中设置一些令牌,该令牌标识客户端事先发送了一个 ajaxical 请求(从而证明客户端启用了 JS)。但这并不包括客户端可以在会话期间同时禁用 JS 的可能性。或者您必须在每次响应后收集时间戳和 ajaxical 请求。不是你真正想做的事情。

        宁愿渲染这两个内容并使用&lt;noscript&gt;&lt;script&gt; 标签来切换一个或另一个。也可以在这里查看我的回答以获取几个示例:opposite of &lt;noscript&gt;

        【讨论】:

          【解决方案5】:

          您无法在服务器端检测到它。实际上,第一次访问您的页面时可能会关闭脚本,然后浏览器设置更改并重新导航,而无需发出新的 HTTP 请求。更不用说各种缓存问题以及脚本可能在技术上“启用”但由于冲突、错误或“安全”工具阻碍而无法工作的地方。

          因此,您需要在客户端对有脚本/无脚本的内容做出所有决定。如今,首选的方法通常是“渐进式增强”:在页面上包含基本的 HTML 版本,然后让 JavaScript 尽可能地替换/升级它:

          <div id="isitjs">
              <p>Backup content for no JavaScript</p>
          </div>
          <script type="text/javascript">
              document.getElementById('isitjs').innerHTML= '<p>Sparkly script-enhanced content!<\/p>';
              // or DOM methods, as you prefer
          </script>
          

          【讨论】:

            【解决方案6】:

            你可以做一些像这样的 hacky,但是你的“启用 javascript”的 html 需要在 helper 中生成

            把它放在你的 application_helper.rb 中

            def javascript_enabled?
              content_tag(:div, [
                content_tag(:script, 'document.write("Javascript Enabled")'), 
                content_tag(:noscript, 'No Javascript')
              ])
            end
            

            这在你看来:

            <%= javascript_enabled? %>
            

            【讨论】:

              【解决方案7】:

              您无法从服务器端检查是否启用了 Javascript,但是,您可以在站点之前设置一个页面,并使用指示是否启用 Javascript 的参数重定向到您的应用程序。请参阅下面的示例代码:

              <html>
              <head>
                  <meta HTTP-EQUIV="REFRESH" content="2; url=./Login.action?javascriptEnabled=false">
                  <link rel="icon" href="favicon.ico" type="image/x-icon"/>
                  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
                  <title></title>
              </head>
              <body onload="window.location.href='./Login.action?javascriptEnabled=true'" ></body>
              </html>
              

              因此,如果启用了 Javascript,则 onload 重定向将起作用,否则,标题元标记将起作用。 诀窍是在元标记重定向上放置 1-2 秒的延迟,因此如果 javascript 重定向不会重定向,则元标记会重定向,表明没有启用任何 JavaScript。

              【讨论】:

                猜你喜欢
                • 1970-01-01
                • 1970-01-01
                • 2016-04-24
                • 1970-01-01
                • 2011-11-12
                • 1970-01-01
                • 2011-05-26
                • 2017-07-05
                相关资源
                最近更新 更多