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

javascript html noscript

17598 просмотра

12 ответа

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

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

Автор: Re0sless Источник Размещён: 27.08.2019 03:33

Ответы (12)


51 плюса

Решение

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

Автор: ceejayoz Размещён: 27.08.2008 02:46

192 плюса

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

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

Автор: Will Размещён: 10.01.2009 07:06

8 плюса

Я не совсем согласен со всеми ответами здесь о предварительном встраивании 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>
Автор: Chris Bloom Размещён: 24.08.2010 01:26

8 плюса

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

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

Автор: alexanderpas Размещён: 04.08.2009 07:47

3 плюса

У меня есть простое и гибкое решение, в чем-то похожее на Уилла (но с дополнительным преимуществом в качестве действительного 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;
}
Автор: Spycho Размещён: 03.06.2011 10:42

1 плюс

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

Автор: TheSmurf Размещён: 27.08.2008 02:46

1 плюс

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

Автор: Shadow2531 Размещён: 01.09.2008 11:32

1 плюс

Мое решение

.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>
Автор: prgDevelop Размещён: 18.07.2013 12:58

0 плюса

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

Автор: Ross Размещён: 27.08.2008 02:47

0 плюса

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

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

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

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

Автор: dkeeney Размещён: 27.08.2008 02:57

0 плюса

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

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

Автор: cpm Размещён: 29.08.2008 09:18

0 плюса

За десятилетие, прошедшее с тех пор, как был задан этот вопрос, 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>

Автор: Chuck Размещён: 27.08.2019 12:30
32x32