Question

我想这更多是关于SEO，而不是想要支持禁用Javascript的浏览器。我有Javascript / jQuery代码，读取一些HTML，基本上显示它更好。在此过程中实际删除了html（使用jQuery的.remove()函数）。

所以我隐藏了html，因此页面加载时没有任何视觉瑕疵。但是现在我想只在启用Javascript时隐藏它。我想最简单的方法是在<head>中添加一些Javascript，将display: none css规则添加到相应的元素中。

有没有更好的方法来处理这种情况？

Answer 1

我认为使用noscript html tag可以完成这项工作。如果在用户浏览器中禁用了脚本，则标签会显示内部的内容。

Answer 2

我可能会使用一个脚本来设置一个类，然后在CSS中引用，但基本上，你是在正确的轨道上。

E.g：

<body>
<script>document.body.className = "jsenabled";</script>

然后你的CSS规则：

body.jsenabled selector_for_your_initially_hidden_content {
    display: none;
}

规则只会在身体有班级时启动。

完整示例：

HTML（和内联脚本）：

<body>
  <script>document.body.className = "jsenabled";</script>
  <div class='foo'>I'm foo, I'm hidden on load</div>
  <div>I'm not foo, I'm not hidden on load</div>
  <div class='foo'>Another foo</div>
  <div>Another bit not hidden on load.</div>
</body>

CSS：

body.jsenabled div.foo {
  display: none;
}

Live copy我只使用“foo”类作为例子。它可以很容易地成为结构选择器。

Answer 3

任何JavaScript只有在启用JavaScript时才会起作用，所以无论你如何使用JavaScript，只有在启用JavaScript时它才会起作用，所以你永远不必测试它。

话说过，您可以在HTML5 Boilerplate：

中看到它是如何完成的

<html class="no-js" lang="en">
... the rest of the page
</html>

使用应用于no-js标记的<html>类。稍后使用JavaScript删除该类，并添加js类，您可以在CSS和HTML中使用这两个类：

<p class="js">This is displayed if JavaScript is enabled</p>
<p class="no-js">This is displayed if JavaScript is disabled</p>

或者在CSS中：

.no-js #someWidget { display: none; }
.js #someFallback { display: none; }

如果您正在使用Modernizr，那么它已经为您更改了这些课程，但即使您没有，那么您只需要执行以下操作：

 document.documentElement.className =
     document.documentElement.className.replace(/\bno-js\b/,'js');

这是一个简单而优雅的解决方案，您需要担心的是样式和标记中的CSS类。

Answer 4

将类hiddenblock添加到要隐藏的每个div（或块），并在标题中添加此JS代码：

$(document).ready(function() {
    $(body).addClass('jsenable');
    $('.hiddenblock').hide();
}

您还可以使用类jsenable来屏蔽或修改其他一些块，如下所示：

.jsenable #myblock { position: absolute; right: 10000px; }

仅在Javascript可用时隐藏html

4 个答案: