是否有与之相反的HTML标签<noscript>？也就是说,仅在启用JavaScript时显示一些内容？例如:
<ifscript>
<h1> Click on the big fancy Javascript widget below</h1>
<ifscript>
当然<ifscript>实际上并不存在.我知道通过<h1>使用JavaScript 添加到DOM 可以实现相同的结果,但是如果可能的话我更愿意使用(X)HTML来实现.
谢谢,唐纳德
Bal*_*usC 35
那<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元素之后,这样就不会出现"内容闪存"或"元素随机播放".Andrew Moore 在这个主题中给出了一个很好的例子.
或者,你可以用另一种方式(hacky)<style>进行<noscript>.这在语法上是无效的,但是IE6及以上的所有浏览器都允许这样做,包括W3C严格的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>
And*_*ore 19
我通常在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树.
| 归档时间： |
|
| 查看次数： |
3827 次 |
| 最近记录： |