Есть ли тег HTML, который делает противоположное от <noscript>? То есть отображает некоторый контент только в том случае, если включен JavaScript? Например:
<ifscript>
<h1> Click on the big fancy Javascript widget below</h1>
<ifscript>
Конечно, <ifscript> фактически не существует. Я знаю, что я мог бы достичь такого же результата, добавив <h1> в DOM с помощью JavaScript, но если бы я предпочел сделать это с помощью (X) HTML, если это возможно.
Спасибо, Донал
Здесь <script>. Просто сначала скройте конкретную часть с помощью CSS и используйте JavaScript для ее отображения. Вот пример основного запуска:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2297643</title>
<script>
window.onload = function() {
document.getElementById("foo").style.display = 'block';
};
</script>
<style>
#foo { display: none; }
</style>
</head>
<body>
<noscript><p>JavaScript is disabled</noscript>
<div id="foo"><p>JavaScript is enabled</div>
</body>
</html>
... или, с небольшой помощью jQuery ready(), что немного раньше с отображением содержимого:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2297643 with jQuery</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('#foo').show();
});
</script>
<style>
#foo { display: none; }
</style>
</head>
<body>
<noscript><p>JavaScript is disabled</noscript>
<div id="foo"><p>JavaScript is enabled</div>
</body>
</html>
Чтобы улучшить работу с пользователем, рассмотрите возможность размещения вызова <script> непосредственно после определенного HTML-элемента, который нужно переключить, чтобы там не было "флэш-контента" или "элементарного тасования". Эндрю Мур дал хороший пример в этом разделе.
В качестве альтернативы вы можете сделать это (взломать) в обратном направлении с помощью <style> в <noscript>. Это синтаксически недействительно, но разрешено всеми браузерами от IE6 и выше, включая W3C-strict Opera:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2297643 with CSS in noscript</title>
</head>
<body>
<noscript>
<style>#foo { display: none; }</style>
<p>JavaScript is disabled
</noscript>
<div id="foo"><p>JavaScript is enabled</div>
</body>
</html>
Я обычно делаю следующее на моих HTML-страницах:
<html>
<head>
<!-- head tags here -->
</head>
<body class="js-off">
<script type="text/javascript">
// Polyglot! This is valid MooTools and jQuery!
$(document.body).addClass('js-on').removeClass('js-off');
</script>
<!-- Document markup here -->
</body>
</html>
Использование этого метода имеет следующие преимущества:
Вы можете настроить оба браузера с включенным JavaScript и без него непосредственно в вашем файле CSS.
Правильный тег XHTML (<style> в <noscript> недопустим, теги <noscript> в <head> недействительны).
Стиль меняется первым, даже до отображения остальной части страницы. Он срабатывает до domReady, поэтому стилизация не мигает.
Таким образом, когда у вас есть виджеты с различным стилем, в зависимости от того, включена ли JS или нет, вы можете определить свой стиль в том же месте в файле CSS.
<style type="text/css">
#jsWarning {
color: red;
}
#jsConfirm {
color: green;
}
body.js-on #jsWarning,
body.js-off #jsConfirm {
display: none;
}
</style>
<div id="jsWarning">This page requires JavaScript to work properly.</div>
<div id="jsConfirm">Congratulations, JavaScript is enabled!</div>
Как насчет
<script>
document.write("<h1>Click on the big fancy Javascript widget below</h1>");
</script>
? Преобразуйте в дерево DOM, если хотите.
Это будет работать:
<script type="text/javascript">
if (document != undefined)
{
document.write("Woohoo, JavaScript is enabled!");
}
</script>
<noscript>
Sorry mate, we use JavaScript here.
<noscript>
Есть интересное обсуждение этих вопросов на Блог Александра Пападимулиса. Он включает в себя элемент управления asp.net ScriptOnly, который действует как элемент управления ifscript, о котором вы спрашивали.