Есть ли HTML-код, противоположный <noscript>?
Есть ли в HTML тег, который будет отображать свое содержимое, только если включен JavaScript? Я знаю, что <noscript> работает наоборот, отображая свой HTML-контент, когда JavaScript отключен. Но я хотел бы отображать форму на сайте, только если доступен JavaScript, и объяснять им, почему они не могут использовать форму, если у них ее нет.
Единственный способ, которым я знаю, как это сделать, - использовать метод document.write(); в теге скрипта, и это кажется немного беспорядочным для больших объемов HTML.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 12
У вас может быть невидимый div, который отображается через JavaScript при загрузке страницы.
Вы также можете использовать Javascript для загрузки контента из другого исходного файла и вывода его. Это может быть немного больше черного ящика, чем вы ищете.
Здесь на ум приходит Статья Алекса, однако он применим только в том случае, если вы используете ASP.NET - его можно эмулировать в JavaScript, однако, опять же, вам придется использовать document.write ();
Вы можете установить видимость абзаца | div как «скрытый».
Затем в функции «onload» вы можете установить видимость «visible».
Что-то вроде:
Этот текст будет скрыт, если не доступен javascript.
Для этого нет метки. Вам нужно будет использовать javascript для отображения текста.
Некоторые люди уже предлагали использовать JS для динамической установки видимого CSS. Вы также можете динамически генерировать текст с помощью document.getElementById(id).innerHTML = "My Content" или динамически создавать узлы, но CSS-хак, вероятно, самый простой для чтения.
Вот пример скрытого способа 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, но вы поняли идею.)
Самый простой способ, о котором я могу думать:
<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.
@Dykam: это разрешено в HTML5: dev.w3.org/html5/spec/Overview.html#the-noscript-element и на практике поддерживается практически всеми браузерами.
@Will, Обязан иметь черных овец. Разве решение для невидимого div не является столь же чистым, но более устойчивым?
Рекомендуется использовать display: none !important, чтобы предотвратить его переопределение более конкретными правилами (например, селекторами id или css), которые предназначены для его использования при включенных скриптах.
Предупреждение: текущие версии Chrome не анализируют теги внутри <noscript> при первом обновлении страницы после отключения Javascript в настройках. Вам нужно дважды нажать перезагрузить, чтобы он заработал.
Чисто, лаконично, без использования javascript. Мне это нравится.
Прежде всего, всегда разделяйте контент, разметку и поведение!
Теперь, если вы используете библиотеку 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 отключен.
Я действительно не согласен со всеми ответами здесь о встраивании 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>
У меня есть простое и гибкое решение, несколько похожее на решение Уилла (но с дополнительным преимуществом правильного 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-only (например, .jsOff .someOtherClass{}). Вы можете использовать его как альтернативу <noscript>:
.jsOn .noJsOnly{
display:none;
}
Мое решение
.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>
В вашем примере html разве вы не хотите заканчивать строки?
За десять лет, прошедших после того, как был задан этот вопрос, в HTML был добавлен Атрибут HIDDEN. Это позволяет напрямую скрывать элементы без использования 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>
По крайней мере, не разрешено в стандарте xhtml.