如何在禁用JavaScript的情况下加载外部CSS文件。
应该适用于IE 6到9、Firefox、Google Chrome和Safari。
我尝试了使用
应该适用于IE 6到9、Firefox、Google Chrome和Safari。
我尝试了使用
5个回答
15
我会采取另一种方式。始终加载包含以body.jsEnabled为前缀的规则的css。然后通过javascript在body上简单添加一个类"jsEnabled"。
通过这种方式"发现功能"，近似于http://www.modernizr.com/的工作方式。
- cherouvim
6
10
我已在IE7中测试了这种方法，并且它可以正常工作。在<noscript>标签内使用<style>标签（而不是<link>）。
<noscript>
<style type="text/css">
@import url (yourexternalfile.css);
body{
background-color: purple;
}
</style>
</noscript>
编辑：
这是在IE7中工作的屏幕截图。
- Yahel
6
奇怪。对我来说，@import和内联CSS都能正常注册。尝试禁用JavaScript并打开http://htmlto.com/page.html。背景是紫色的，文本使用小型大写字母进行样式设置吗？对我来说是这样的。 - Yahel
如果我在IE7中关闭JavaScript，它会显示紫色背景。否则是白色的。 - Jitendra Vyas
这就是关键。紫色样式应用在noscript标签内；h2标签上的小型大写字母也是如此。在那个页面上，所有的样式都在noscript标签中加载，以证明它可以工作。（当JS启用时，该页面将不会被样式化。）在你的情况下，你可以使用@import url('your-no-js-css')来只在JS禁用时加载CSS。 - Yahel
好的，你的意思是@import可以工作，但<link>在IE7上不行，好的，我会在其他浏览器中检查，并为这个技巧点赞。 - Jitendra Vyas
是的，看起来是这样。 - Yahel
我更喜欢这个答案，因为它不会对启用 JavaScript 的用户造成闪烁。 - Barka
4
试试这个：
<html>
<head>
<script type="text/javascript"> document.write('<'+'!--'); </script>
<link rel="stylesheet" type="text/css" href="non-js.css">
<!-- -->
</head>
<body>
<script type="text/javascript"> document.write('<'+'!--'); </script>
Visible when no-JS
<!-- --> Always visible
</body>
</html>
即使使用Hack方式编写，HTML的语法也要正确。当JavaScript启用时，注释开始控制标签将被打印到页面中 - 然后第二个开始标签被忽略，并且结束标签关闭了被注释的内容。link标签将被注释并且根本不会被下载，所以如果JS被启用。
- gertas
1
我很想使用这个方法，因为这是目前为止唯一有效的方法。如果没有启用js，我想通过外部样式表加载一些自定义字体。如果启用了js，我希望通过typekits webfont loader加载字体，以便在字体加载完成后触发js事件。 - codekipple
1
虽然在<head>中不允许使用<noscript>，而<link> + <style>只能在<head>中使用，但您也可以使用以下方法：
<link id="noscriptStyle" rel="stylesheet" type="text/css" href="my_external_css_file.css" />
<script type="text/javascript">
document.getElementById('noscriptStyle').parentNode.removeChild(document.getElementById('noscriptStyle'));
</script>
但是我个人更喜欢cherouvim发布的方法。
- Dr.Molle
-1
CSS文件与启用/禁用JavaScript无关...
<link rel="stylesheet" type="text/css" href="my_external_css_file.css" />
- Fidi
3
1我认为这不是原始帖子的问题所在。他想要在禁用js时有条件地加载css。 - cherouvim
这个问题有歧义，但是我理解的方式是，他想为没有启用Javascript的用户包含一个特定的CSS文件。 - Spudley
如果JavaScript被禁用，我想要改变页面的外观。 - Jitendra Vyas
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
$(function(){$('body').addClass('jsEnabled');});即可。 - cherouvim<link rel="stylesheet" type="text/css" href="non-js.css">，并希望将此 CSS 文件保留在所有其他 CSS 文件之后。 - Jitendra Vyas