Есть ли HTML, противоположный <noscript>?
https://stackoverflow.com/questions/30319
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Есть ли в HTML тег, который будет отображать свое содержимое только в том случае, если включен JavaScript?Я знаю <noscript> работает наоборот: отображает HTML-содержимое, когда JavaScript отключен.Но я хотел бы отображать форму на сайте только в том случае, если доступен JavaScript, сообщая им, почему они не могут использовать форму, если у них ее нет.
Единственный способ, которым я знаю, как это сделать, - это document.write(); в теге скрипта, и для больших объемов HTML это кажется немного запутанным.
Решение
У вас может быть невидимый элемент div, который будет отображаться через JavaScript при загрузке страницы.
Другие советы
Самый простой способ, который я могу придумать:
<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.
Я не совсем согласен со всеми ответами здесь о предварительном внедрении HTML и сокрытии его с помощью CSS до тех пор, пока он снова не будет показан с помощью JS.Даже без включения JavaScript этот узел все еще существует в DOM.Да, большинство браузеров (даже браузеров со специальными возможностями) игнорируют это, но оно все еще существует, и могут быть странные моменты, когда оно аукнется вам.
Мой предпочтительный метод — использовать jQuery для генерации контента.Если контента будет много, вы можете сохранить его как фрагмент HTML (только тот HTML, который вы хотите отобразить, а не HTML, тело, заголовок и т. д.).теги), затем используйте функции ajax jQuery, чтобы загрузить его на всю страницу.
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>
Прежде всего, всегда разделяйте контент, разметку и поведение!
Теперь, если вы используете библиотеку 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):
Присвойте элементу 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» не будет удален из элемента body).
Это также может обеспечить механизм стилизации только для js (например. .jsOn .someClass{}) и стили только для JS (например. .jsOff .someOtherClass{}).Вы можете использовать его, чтобы предоставить альтернативу <noscript>:
.jsOn .noJsOnly{
display:none;
}
Вы также можете использовать Javascript для загрузки содержимого из другого исходного файла и вывода его.Хотя это может быть немного больше черного ящика, чем вы ищете.
Вот пример скрытого способа 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, но идею вы поняли.)
Мое решение
.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>
статья Алекса здесь приходит на ум, однако это применимо только в том случае, если вы используете ASP.NET - однако его можно эмулировать в JavaScript, но вам снова придется использовать document.write();
Вы можете установить для видимости абзаца|div значение «скрытый».
Затем в функции onload вы можете установить видимость на «видимую».
Что-то вроде:
u003Cbody onload="javascript:document.getElementById(rec).style.visibility=visible">nu003Cp style="visibility:видимый" id="rec">Этот текст будет скрыт, если не доступен JavaScript.</p>
Для этого нет тега.Вам нужно будет использовать JavaScript для отображения текста.
Некоторые люди уже предлагали использовать JS для динамической настройки видимости CSS.Вы также можете динамически генерировать текст с помощью document.getElementById(id).innerHTML = "My Content" или динамическое создание узлов, но CSS-хак, вероятно, самый простой для чтения.
