是否有一个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>
没有文件。写信，没有脚本，纯CSS。
我真的不同意所有的答案在这里关于嵌入该HTML事先和隐藏它与CSS直到它再次显示与JS。甚至w/o JavaScript启用，这一点仍然存在DOM中。的确，大多数浏览器(甚至无障碍的浏览器)会忽略它，但是它仍然存在并有可能成为奇数时候回来咬你。
我的首选的方法将是使用jQuery产生的内容。如果这将是一个很大的内容，然后你可以保存为HTML段(只是HTML你会想要表明，没有html、身体、头，等等。标签)，然后使用google i/o大会的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>
第一，总是单独的内容，标记和行为！
现在，如果你们采用延库(你真的应该的，它使JavaScript容易得多)，下列代码应该做的：
$(document).ready(function() {
$("body").addClass("js");
});
这会给你一个额外的类的身体的时候JS启用。现在，在CSS，你可以隐藏的地区的当JS类不是可用的，并显示出区域当JS是可用的。
或者，也可添加 no-js 作为默认的类对你的身体标记，并且使用这个代码:
$(document).ready(function() {
$("body").removeClass("no-js");
$("body").addClass("js");
});
记住，这仍然显示，如果CSS是残疾人。
我有一个简单和灵活的解决方案，有些相似，将是(但增加受益的有效html):
给身体元件的一类"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"类应该执行尽可能早的内部体标签。它不能执行的早期,因为身体标记不会在那里呢。它不应执行后，因为它将意味着要素与"jsOnly"类可能是不可见的权(因为他们会相匹配的CSS选择，隐藏了他们，直到该"jsOff"类从身体元件)。
这也可以提供一种机制，用于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>
(你可能必须调整它对穷人即，但是你的想法。)
我的解决方案
.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但是但是再一次你会有用的文件。写();
你可以设定可见度的一个段落|div"隐藏".
然后在加载功能，可以设置的能见度为'可见'.
是这样的：
<body onload="javascript:document.getElementById(rec).style.visibility=visible"> 可见的"id="rec">这个文本可以隐藏的，除非javascript。</p>
没有一个标签。你会需要使用javascript出示的文字。
有些人已经建议采用JS动态设定CSS可见。你也可以动态生成的文本 document.getElementById(id).innerHTML = "My Content" 或动态地建立节点，但CSS黑客可能是最简单的阅读。
