javascript - <noscript>的对立面

This question already has answers here:

Is there a HTML opposite to <noscript>?

(12个答案)

6年前关闭。

是否存在与<noscript>相反的HTML标记？也就是说，仅在启用JavaScript的情况下才显示某些内容？例如:

<ifscript>
<h1> Click on the big fancy Javascript widget below</h1>
<ifscript>

当然<ifscript>实际上并不存在。我知道我可以通过使用JavaScript将<h1>添加到DOM来达到相同的结果，但是如果可能的话，如果我更愿意使用(X)HTML来做到这一点。

谢谢，
多纳尔

最佳答案

<script>用于。刚开始时使用CSS隐藏特定的部分，然后使用JavaScript进行显示。这是一个基本的启动示例:

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2297643</title>
        <script>
            window.onload = function() {
                document.getElementById("foo").style.display = 'block';
            };
        </script>
        <style>
            #foo { display: none; }
        </style>
    </head>
    <body>
        <noscript><p>JavaScript is disabled</noscript>
        <div id="foo"><p>JavaScript is enabled</div>
    </body>
</html>

...或者，在jQuery很少帮助下 ready() 可以更快地显示内容:

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2297643 with jQuery</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#foo').show();
            });
        </script>
        <style>
            #foo { display: none; }
        </style>
    </head>
    <body>
        <noscript><p>JavaScript is disabled</noscript>
        <div id="foo"><p>JavaScript is enabled</div>
    </body>
</html>

为了改善用户体验，请考虑将<script>调用直接放在需要切换的特定HTML元素之后，这样就不会出现“内容闪烁”或“元素混洗”的情况。安德鲁·摩尔(Andrew Moore)在此主题中给出了good example。

另外，您也可以使用<style>中的<noscript>来做到这一点(hacky)。从语法上讲，这是无效的，但所有IE6及更高版本的浏览器(包括W3C严格的Opera)都允许这样做:

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2297643 with CSS in noscript</title>
    </head>
    <body>
        <noscript>
             <style>#foo { display: none; }</style>
             <p>JavaScript is disabled
        </noscript>
        <div id="foo"><p>JavaScript is enabled</div>
    </body>
</html>

关于javascript - <noscript>的对立面，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/2297643/