Question

这个问题可能听起来很熟悉，但与之前提出的问题并不完全相同。

我有一个CSS，发送到没有javascript功能的浏览器（由链接标记引用）。我有另一个CSS，由网站的ajax版本使用，并由JS注入页面。这些文件中的每一个都相对较大（gt 200K）。 我不希望JS启用的客户端下载这两个文件。 我可以使用noscript标签轻松完成此操作。但是，如果用户位于过滤脚本标记的代理后面，则存在限制。所以浏览器完全没有CSS。

<html>
<head>
<noscript><link rel="stylesheet" type="text/css" href="nojs.css" /></noscript>
<script>
document.write('<link rel="stylesheet" type="text/css" href="js.css" />');
</script>
</head>
<body></body>
</html>

我尝试以非标准方式使用HTML评论在Chrome中有效但在FF中失败：

<html>
<head>
<script>
document.write('<link rel="stylesheet" type="text/css" href="js.css" />');
document.write('<!----');
</script>
<link rel="stylesheet" type="text/css" href="nojs.css" /><!-- -->
</head>
<body></body>
</html>

两个浏览器都正确地解析了HTML（不确定IE和Opera是否也会这样），但FF在所有情况下都会下载nojs.css（在启用JS时没有真正应用它）。

有什么想法吗？

Answer 1

Firefox的预取机制似乎忽略了注释并预加载了CSS文件，但前提是它被引用为link元素。

使用CSS import语句来禁止预取未使用的文件：

<html>
  <head>
    <script>
      document.write('<link rel="stylesheet" type="text/css" href="js.css" />');
      document.write('<!--');
    </script>
    <style>
      @import url(nojs.css)
    </style>
    <!-- -->
  </head>
<body>
...

在不使用<noscript> </noscript>的情况下启用JS时，避免加载CSS资源

1 个答案: