2011-03-10 12 views
3

これはJavascriptが無効になっているブラウザをサポートしたいと思っているよりもSEOに関するものだと思います。私はいくつかのHTMLで読むと基本的にそれをはるかに良い表示Javascript/jQueryコードがあります。処理中にhtmlは実際に削除されます(jQueryの.remove()関数を使用)。JavaScriptが利用可能な場合のみHTMLを非表示にします

したがって、ページが読み込まれるときに視覚的なアーティファクトがないように、HTMLを非表示にします。しかし、今私はJavascriptが有効になっている場合、それを隠すだけです。私は最も簡単なことは、適切な要素にdisplay: none CSSルールを追加する<head>にいくつかのJavascriptを持つことだと思います。

この状況を処理するには、より良い方法がありますか?

答えて

2

JavaScriptはJavaScriptを有効にしている場合にのみ機能します。JavaScriptを使用していても、JavaScriptが有効な場合のみ動作します。言われたこと

、あなたはそれがHTML5 Boilerplateで行われているかを確認することができます<html>タグに適用no-jsクラスを使用して

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

。あなたはCSSとHTMLで使用することができますどちらも、クラスが後でJavaScriptを使用して除去されるとjsクラスが追加されます。

<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クラスがあるのを心配する必要があります。

2

私は多分あなたの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" というクラスを使用しました。それは構造セレクターと同じように簡単にできます。

+0

domが完全に読み込まれる前に、Akarunsソリューションでわずかなちらつきが発生する可能性があるため、最も効果的です。 – ullmark

+0

はい、それはあなたが持っている "隠しブロック"の量に依存します! – Akarun

+0

@Akarun:そうは思わない。 'body'にクラスを追加することで、構造セレクタや(もし他のすべてが失敗した場合)隠すコンテンツにクラスを追加することで、セレクタで必要なものだけを簡単に隠すことができます(例のように)。 –

0

非表示にしたいそれぞれのdiv(またはブロック)にクラスhiddenblockを追加し、これは、ヘッダー内のコードをJS追加:

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

あなたはまた、いくつかの他のブロックをマスクまたは変更するクラスjsenableを使用することができますこのように:

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

ページを読み込んだときに非javascriptのhtmlがちらつきませんか? –

5

私はnoscript htmlを使用していると思いますtag仕事をします。タグは、ユーザーのブラウザでスクリプトが無効になっている場合、コンテンツを内部に表示します。