只有當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

回答

相關問題