0

我正在使用响应式网页设计和 RESS 构建一个 Django 站点。如果用户在浏览器中禁用了 JavaScript 和/或 cookie，我想阻止用户访问该站点。下面显示的代码是实现这一点的好方法吗？有什么办法可以改进代码吗？最后，性能会受到影响吗？我认为服务器会不必要地将代码下载到禁用 JS 的浏览器。但是，我认为，在用户访问该站点一次之后，他们会知道他们需要启用 JS 才能使用它。

我想我更担心是否会有任何明显的延迟，因为每次用户访问网站上的任何页面时都会运行此检查。由于该网站将在移动设备上使用，因此速度是首要考虑因素。

谢谢。

# static/styles.css:
<style type="text/css">
    #page-content, #cookie-warning {
          display: none;
    }
</style>


# templates/base.html
<!DOCTYPE html>
<html>
<head>
    <title>RWD/RESS Website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/static/styles.css"/>
</head>
<body>
    <noscript>WARNING: You must enable JavaScript in your browser in order to use this website.</noscript>
    <div id="cookie-warning">
        WARNING: You must enable cookies to use this site.
    </div>

    <div id="page-content">
        {% block body_wrapper %} {% endblock %}
    </div>


    <script type="text/javascript">
        // Functions to test capabilities
        var javascript_enabled = function () {
            // var elem = document.getElementById("page-content");
            return true;
        };
        var cookies_enabled = function() {
            var cookieEnabled = (navigator.cookieEnabled) ? true : false;
            if (typeof navigator.cookieEnabled == "undefined" && !cookieEnabled) {
                document.cookie = "test_cookie";
                cookieEnabled = (document.cookie.indexOf("test_cookie") != -1) ? true : false;
            }
            return cookieEnabled;
        };
        // Function to allow multiple onload event listeners
        function addLoadEvent(func) {
            var oldOnLoad = window.onload;
            if (typeof window.onload != 'function') {
                window.onload = func;
            } else {
                window.onload = function() {
                    if (oldOnLoad) {
                        oldOnLoad();
                    }
                    func();
                }
            }
        }

        // Add onload events for capability functions.
        addLoadEvent(cookies_enabled);
        addLoadEvent(javascript_enabled);

        // Toggle page content or warning messages.
        if (javascript_enabled() === true) {
            var pageContentElem = document.getElementById("page-content");
            if (cookies_enabled() === true) {
                pageContentElem.style.display = "block";
            } else {
                var cookieWarningElem = document.getElementById("cookie-warning");
                cookieWarningElem.style.display = "block";
                pageContentElem.style.display = "none";
            }
        }
    </script>

</body>
</html>

# templates/some_page.html
{% extends "base.html" %}

{% block body_wrapper %}
    {# content goes here #}
{% endblock body_wrapper%}
4

1 回答 1

0

您可以使用<noscript>标签：

在base.html,

<html>
<head></head>
<body>
<noscript>
    <h3>Javascript is disabled</h3>
    <style type="text/css">
       #main {display: none; } 
    </style>
</noscript>
<script type="text/javascript">
  if(!navigator.CookieEnabled){
     document.getElementById('main').innerHtml = "Cookies are disabled";
  }
</script>

<div id="main">
    {# This has the body's main content. #}
</div>

</body>
</html>
于 2013-06-10T22:54:57.410 回答