Есть ли HTML напротив <noscript>? - PullRequest
Новая
       62

Есть ли HTML напротив <noscript>?

93 голосов
/ 27 августа 2008

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

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

Ответы [ 11 ]

189 голосов
/ 10 января 2009

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

<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.

49 голосов
/ 27 августа 2008

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

8 голосов
/ 24 августа 2010

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

Мой предпочтительный метод - использовать jQuery для генерации контента. Если контента будет много, то вы можете сохранить его как фрагмент HTML (только HTML, который вы хотите показать, а не теги html, body, head и т. Д.), А затем использовать функции jjuery 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>
8 голосов
/ 04 августа 2009

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

Теперь, если вы используете библиотеку 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 отключен.

3 голосов
/ 03 июня 2011

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

Дайте элементу тела класс "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. Его нельзя выполнить раньше, так как тег body еще не будет там. Его не следует выполнять позже, поскольку это будет означать, что элементы с классом "jsOnly" могут быть невидимы сразу (поскольку они будут соответствовать селектору CSS, который их скрывает, пока класс "jsOff" не будет удален из элемента body).

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

.jsOn .noJsOnly{
    display:none;
}
1 голос
/ 18 июля 2013

Мое решение

.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>
1 голос
/ 01 сентября 2008

Вот пример для скрытого пути 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, но вы поняли.)

1 голос
/ 27 августа 2008

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

0 голосов
/ 30 августа 2008

Для этого нет тега. Вы должны будете использовать JavaScript, чтобы показать текст.

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

0 голосов
/ 27 августа 2008

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

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

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

Этот текст будет скрыт, если не доступен javascript.

Страница:
...