只有当Javascript可用时才会隐藏html

我想这更多的是关于搜索引擎优化，而不是想支持禁用JavaScript的浏览器。我有Javascript/jQuery代码，读取一些HTML，基本上显示它更好。在这个过程中，html实际上被删除（使用jQuery的.remove()函数）。只有当Javascript可用时才会隐藏html

所以我隐藏了html，所以在页面加载时没有任何可视的工件。但是现在我只想隐藏它，如果Javascript已启用。我猜最简单的事情是在<head>中添加一些Javascript，将display: none css规则添加到适当的元素中。

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

来源

2011-03-10 at.

任何JavaScript只有在启用了JavaScript的情况下才能正常工作，所以无论您如何使用JavaScript，只有在启用JavaScript的情况下才能正常工作，因此您无需为此进行测试。

话虽如此，你可以看到它是如何在做HTML5 Boilerplate：

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

使用施加到<html>标签no-js类。该类使用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');

这是一个简单而优雅的解决方案，所有的Y你不用担心你的样式和标记是CSS类。

来源

2011-03-10 10:23:48 rsp

我可能会用一点脚本来设置一个关于body的类，然后你可以在你的CSS中引用它，但基本上，你在正确的轨道上。

例如为：

<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” 的类的实例。它可以很容易地成为一个结构选择器。

来源

2011-03-10 10:17:23

效果最好，因为Akaruns解决方案可能会在dom完全加载之前导致轻微闪烁。 – ullmark

是的，它取决于您拥有的“隐藏块”的数量！ – Akarun

@Akarun：我不这么认为。通过将类添加到'body'中，通过向内容中添加一个类以隐藏（如示例中为了清晰），可以很容易地隐藏选择器所需的任何内容，无论是结构选择器还是（如果一切都失败）。 –

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

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

您还可以使用类jsenable掩盖或修改一些其他块，像这样：

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

来源

2011-03-10 10:18:42 Akarun

加载页面时不会使闪烁的非JavaScript html？ –

我认为使用无脚本的HTML tag将做的工作。如果脚本在用户浏览器中被禁用，标签将显示内容。

来源

2011-03-10 10:19:48 katsuya

只有当Javascript可用时才会隐藏html

回答

相关问题