Есть ли HTML, противоположный <noscript>?

Есть ли тег в HTML, который будет отображать только его содержимое, если JavaScript включен? Я знаю, что <noscript> работает наоборот, показывая его содержимое HTML, когда JavaScript отключен. Но я хотел бы показывать только форму на сайте, если доступен JavaScript, и сообщить им, почему они не могут использовать форму, если у нее ее нет.

Единственный способ, которым я знаю, это сделать с помощью метода document.write(); в теге script, и он кажется немного беспорядочным для большого количества HTML.

ОТВЕТЫ

Ответ 1

У вас может быть невидимый div, который будет отображаться через JavaScript при загрузке страницы.

Ответ 2

Самый простой способ, о котором я могу думать:

<html>
<head>
    <noscript><style> .jsonly { display: none } </style></noscript>
</head>

<body>
    <p class="jsonly">You are a JavaScript User!</p>
</body>
</html>

Нет document.write, нет скриптов, чистого CSS.

Ответ 3

Прежде всего, всегда раздельный контент, разметка и поведение!

Теперь, если вы используете библиотеку jQuery (вам действительно нужно, это делает JavaScript намного проще), следующий код должен делать:

$(document).ready(function() {
    $("body").addClass("js");
});

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

В качестве альтернативы вы можете добавить no-js в качестве класса по умолчанию в свой тег body и использовать этот код:

$(document).ready(function() {
    $("body").removeClass("no-js");
    $("body").addClass("js");
});

Помните, что он по-прежнему отображается, если CSS отключен.

Ответ 4

Я не согласен со всеми ответами здесь о вложении HTML заранее и спрятать его с CSS, пока он снова не будет показан с помощью JS. Даже без JavaScript включен, что node все еще существует в DOM. Правда, большинство браузеров (даже браузеров доступности) будут игнорировать его, но оно все еще существует, и могут появиться нечетные моменты, когда вы вернетесь, чтобы укусить вас.

Моим предпочтительным методом было бы использовать jQuery для создания контента. Если в нем будет много контента, вы можете сохранить его как фрагмент HTML (только HTML, который вы хотите показать, и ни один из тегов html, body, head и т.д.), Затем используйте функции jQuery ajax для загрузки в полная страница.

test.html

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8">
     $(document).ready(function() {
       $.get('_test.html', function(html) {
         $('p:first').after(html);
       });
     });
    </script>
</head>
<body>
  <p>This is content at the top of the page.</p>
  <p>This is content at the bottom of the page.</p>
</body>
</html>

_test.html

<p>This is from an HTML fragment document</p>

Результат

<p>This is content at the top of the page.</p>
<p>This is from an HTML fragment document</p>
<p>This is content at the bottom of the page.</p>

Ответ 5

У меня есть простое и гибкое решение, несколько похожее на Will (но с дополнительным преимуществом правильного html):

Дайте элементу body класс "jsOff" . Удалите (или замените) это с помощью JavaScript. Попросите CSS скрыть любые элементы с классом "jsOnly" с родительским элементом с классом "jsOff" .

Это означает, что если JavaScript включен, класс "jsOff" будет удален из тела. Это будет означать, что элементы с классом "jsOnly" не будут иметь родителя с классом "jsOff" и поэтому не будут соответствовать селектору CSS, который их скрывает, поэтому они будут показаны.

Если JavaScript отключен, класс "jsOff" не удаляется из тела. Элементы с "jsOnly" будут иметь родителя с "jsOff" , и поэтому будет соответствовать селектору CSS, который их скрывает, поэтому они будут скрыты.

Здесь код:

<html>
    <head>
        <!-- put this in a separate stylesheet -->
        <style type="text/css">
            .jsOff .jsOnly{
                display:none;
            }
        </style>
    </head>

    <body class="jsOff">
        <script type="text/javascript">
            document.body.className = document.body.className.replace('jsOff','jsOn');
        </script>

        <noscript><p>Please enable JavaScript and then refresh the page.</p></noscript>

        <p class="jsOnly">I am only shown if JS is enabled</p>
    </body>
</html>

Это действительный html. Это просто. Он гибкий.

Просто добавьте класс "jsOnly" к любому элементу, который вы хотите показывать только при включенном JS.

Обратите внимание, что JavaScript, который удаляет класс jsOff, должен выполняться как можно раньше внутри тега body. Он не может быть выполнен ранее, так как тег тела еще не будет. Его не следует выполнять позже, так как это означает, что элементы с классом "jsOnly" могут быть недоступны сразу (поскольку они будут соответствовать селектору CSS, который их скрывает, пока класс "jsOff" не будет удален из элемента body).

Это также может обеспечить механизм js-only styling (например, .jsOn .someClass{}) и стиль не-js-only (например, .jsOff .someOtherClass{}). Вы можете использовать его, чтобы предоставить альтернативу <noscript>:

.jsOn .noJsOnly{
    display:none;
}

Ответ 6

Вы также можете использовать Javascript для загрузки контента из другого исходного файла и вывода его. Это может быть немного больше черного ящика, чем вы ищете.

Ответ 7

Вот пример скрытого пути div:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *[data-when-js-is-on] {
                display: none;
            }
        </style>
        <script>
            document.getElementsByTagName("style")[0].textContent = "";
        </script>
    </head>
    <body>
        <div data-when-js-is-on>
            JS is on.
        </div>
    </body>
</html>

(Вам, вероятно, придется подстроить его для плохого IE, но вы получите идею.)

Ответ 8

Мое решение

.css

.js {
display: none;
}

.js

$(document).ready(function() {
    $(".js").css('display', 'inline');
    $(".no-js").css('display', 'none');
});

.html

<span class="js">Javascript is enabled</span>
<span class="no-js">Javascript is disabled</span>

Ответ 9

Alex article, но это применимо только в том случае, если вы используете ASP.NET - его можно было бы эмулировать в JavaScript, однако но снова вам придется использовать document.write();

Ответ 10

Вы можете установить видимость абзаца | div на "скрытый".

Затем в функции "onload" вы можете установить видимость на "visible".

Что-то вроде:

< body onload = "javascript: document.getElementById(rec).style.visibility = visible" > < p style = "visibility: visible" id = "rec" > Этот текст должен быть скрыт, если не доступен javascript. </p>

Ответ 11

Для этого нет тега. Вам нужно будет использовать javascript для отображения текста.

Некоторые люди уже предложили использовать JS для динамического отображения CSS. Вы также можете динамически генерировать текст с помощью document.getElementById(id).innerHTML = "My Content" или динамически создавать узлы, но взломы CSS, вероятно, наиболее просто читать.

Ответ 12

За десятилетие, прошедшее после того, как этот вопрос был задан, атрибут HIDDEN был добавлен в HTML. Это позволяет напрямую скрывать элементы без использования CSS. Как и в решениях на основе CSS, элемент должен быть скрыт скриптом:

<form hidden id=f>
Javascript is on, form is visible.<br>
<button>Click Me</button>
</form>
<script>
document.getElementById('f').hidden=false;
</script>
<noscript>
Javascript is off, but form is hidden, even when CSS is disabled.
</noscript>