Question

从各种浏览器的角度来看，最广泛的兼容性是，仅为启用JavaScript的客户端显示内容的最佳方式是什么？然而，有类似的问题，它们已经陈旧且存在冲突。

我见过其他选择，但看起来这两个是最好的？

<!DOCTYPE html>
<html>
    <head>
        <title>anti-noscript</title>
        <noscript><style> .yes_script1 { display: none } </style></noscript>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
        <script type='text/javascript'>
            $(function(){
                $('.yes_script2').show();
            });
        </script>
        <style>
            .yes_script2{display:none;}
        </style>
    </head>
    <body>
        <p class="yes_script1">Show to JavaScript clients only.</p>
        <noscript>Show to non-JavaScript clients only.</noscript>
        <p class="yes_script2">Show to JavaScript clients only.</p>
    </body>
</html>

Answer 1

实际上，您在问题中链接了一个非常好的答案： https://stackoverflow.com/a/431554/2373138

<head>
    <noscript><style>.jsonly { display: none; }</style></noscript>
</head>
<body>
    <div class="jsonly">javascript users only</div>
</body>

另一个常见的解决方案是使用javascript本身：

<head>
    <style>
        .jsonly { display: none; }
        .js .jsonly { display: block; }
    </style>
</head>
<body>
    <script>
        document.body.className = "js";
    </script>

    <div class="jsonly">javascript users only</div>
</body>

DEMO

但是，对于内联元素，此解决方案将失败，因为它将覆盖display属性，但这是一个修复，只需使用以下内容替换CSS：

body:not(.js) .jsonly { display: none; }

DEMO

仅针对启用JavaScript的客户端显示（即反NOSCRIPT）

1 个答案: