Скрыть HTML только когда Javascript доступен - PullRequest
Новая
       7

Скрыть HTML только когда Javascript доступен

3 голосов
/ 10 марта 2011

Полагаю, это больше связано с SEO, чем с поддержкой браузеров с отключенным Javascript.У меня есть Javascript / JQuery код, который читает в некоторых HTML и в основном отображает его намного лучше.HTML фактически удаляется (с помощью функции jQuery .remove()) во время процесса.

Поэтому я скрываю HTML, чтобы не было визуальных артефактов при загрузке страницы.Но теперь я хочу скрыть это, только если Javascript включен.Полагаю, проще всего иметь Javascript в <head>, который добавляет правило display: none css к соответствующим элементам.

Есть ли лучший способ справиться с этой ситуацией?

Ответы [ 4 ]

5 голосов
/ 10 марта 2011

Я думаю, что использование noscript html tag сделает эту работу.Тег отображает содержимое внутри, если скрипт отключен в браузере пользователя.

2 голосов
/ 10 марта 2011

Любой 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 в ваших стилях и разметке.

2 голосов
/ 10 марта 2011

Я бы, вероятно, использовал один бит скрипта, который устанавливает класс для тела, который вы затем можете ссылаться в своем 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 голосов
/ 10 марта 2011

Добавьте класс hiddenblock к каждому div (или блоку), который вы хотите скрыть, и добавьте этот JS-код в заголовок: 

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

Вы также можете использовать класс jsenable для маскировкиили измените какой-нибудь другой блок, например: 

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