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

Question 1

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

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

Question 2

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

Question 3

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

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

Question 4

Я не совсем согласен со всеми ответами здесь о встраивании HTML заранее и сокрытии его с помощью CSS, пока он снова не будет показан с помощью JS. Даже без включенного JavaScript этот узел все еще существует в 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>

Question 5

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

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

Question 6

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

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

.jsOn .noJsOnly{
    display:none;
}

Question 7

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

Question 8

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

Question 9

Мое решение

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

Question 10

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

Question 11

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

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

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

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

Question 12

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

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

Question 13

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

Answer 1

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

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

Answer 2

56

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

Ceejayoz
источник

Answer 3

217

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

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

Будет
источник

11

По крайней мере, не разрешено в стандарте xhtml.

Dykam

29

@Dykam: это разрешено в HTML5: dev.w3.org/html5/spec/Overview.html#the-noscript-element и на практике поддерживается практически всеми браузерами.

Уилл

3

Рекомендуется использовать display: none !important, чтобы предотвратить его переопределение более конкретными правилами (например, селекторами id или css), которые предназначены для его использования, когда скрипты включены.

Istador

3

Предупреждение: текущие версии Chrome не анализируют теги внутри <noscript>при первом обновлении страницы после отключения Javascript в настройках. Вам нужно дважды нажать перезагрузить, чтобы он заработал.

Tobia

2

Чисто, лаконично, без использования javascript. Мне это нравится.

Dragas

Answer 4

11

По крайней мере, не разрешено в стандарте xhtml.

Dykam

Answer 5

29

@Dykam: это разрешено в HTML5: dev.w3.org/html5/spec/Overview.html#the-noscript-element и на практике поддерживается практически всеми браузерами.

Уилл

Answer 6

3

Рекомендуется использовать display: none !important, чтобы предотвратить его переопределение более конкретными правилами (например, селекторами id или css), которые предназначены для его использования, когда скрипты включены.

Istador

Answer 7

3

Предупреждение: текущие версии Chrome не анализируют теги внутри <noscript>при первом обновлении страницы после отключения Javascript в настройках. Вам нужно дважды нажать перезагрузить, чтобы он заработал.

Tobia

Answer 8

2

Чисто, лаконично, без использования javascript. Мне это нравится.

Dragas

Answer 9

Я не совсем согласен со всеми ответами здесь о встраивании HTML заранее и сокрытии его с помощью CSS, пока он снова не будет показан с помощью JS. Даже без включенного JavaScript этот узел все еще существует в 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>

Answer 10

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

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

Answer 11

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

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

.jsOn .noJsOnly{
    display:none;
}

Answer 12

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

Answer 13

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

Answer 14

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
источник

В вашем примере html разве вы не хотите заканчивать строки ?

кратко

Answer 15

В вашем примере html разве вы не хотите заканчивать строки ?

кратко

Answer 16

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

Answer 17

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

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

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

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

Answer 18

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

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

Answer 19

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

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

Ответы:

test.html

_test.html

результат