Напротив <noscript>

Есть ли тег HTML, который делает противоположное от <noscript>? То есть отображает некоторый контент только в том случае, если включен JavaScript? Например:

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

Конечно, <ifscript> фактически не существует. Я знаю, что я мог бы достичь такого же результата, добавив <h1> в DOM с помощью JavaScript, но если бы я предпочел сделать это с помощью (X) HTML, если это возможно.

Спасибо, Донал

Ответы

Ответ 1

Здесь <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-элемента, который нужно переключить, чтобы там не было "флэш-контента" или "элементарного тасования". Эндрю Мур дал хороший пример в этом разделе.

В качестве альтернативы вы можете сделать это (взломать) в обратном направлении с помощью <style> в <noscript>. Это синтаксически недействительно, но разрешено всеми браузерами от IE6 и выше, включая W3C-strict 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>

Ответ 2

Я обычно делаю следующее на моих HTML-страницах:

<html>
  <head>
    <!-- head tags here -->
  </head>
  <body class="js-off">
    <script type="text/javascript">
      // Polyglot! This is valid MooTools and jQuery!
      $(document.body).addClass('js-on').removeClass('js-off');
    </script>

    <!-- Document markup here -->
  </body>
</html>

Использование этого метода имеет следующие преимущества:

Вы можете настроить оба браузера с включенным JavaScript и без него непосредственно в вашем файле CSS.
Правильный тег XHTML (<style> в <noscript> недопустим, теги <noscript> в <head> недействительны).
Стиль меняется первым, даже до отображения остальной части страницы. Он срабатывает до domReady, поэтому стилизация не мигает.

Таким образом, когда у вас есть виджеты с различным стилем, в зависимости от того, включена ли JS или нет, вы можете определить свой стиль в том же месте в файле CSS.

<style type="text/css">
  #jsWarning {
    color: red;
  }

  #jsConfirm {
    color: green;
  }

  body.js-on #jsWarning,
  body.js-off #jsConfirm {
    display: none;
  }
</style>

<div id="jsWarning">This page requires JavaScript to work properly.</div>
<div id="jsConfirm">Congratulations, JavaScript is enabled!</div>

Ответ 3

Как насчет

<script>
document.write("<h1>Click on the big fancy Javascript widget below</h1>");
</script>

? Преобразуйте в дерево DOM, если хотите.

Ответ 4

Это будет работать:

<script type="text/javascript">
 if (document != undefined)
 {
    document.write("Woohoo, JavaScript is enabled!");
 }
</script>
<noscript>
Sorry mate, we use JavaScript here.
<noscript>

Ответ 5

Есть интересное обсуждение этих вопросов на Блог Александра Пападимулиса. Он включает в себя элемент управления asp.net ScriptOnly, который действует как элемент управления ifscript, о котором вы спрашивали.