0

レスポンシブ Web デザインと 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