Как мне показать контент, когда Javascript недоступен, скрыть его, когда javascript доступен, и не мерцать в любом случае? - PullRequest
Новая
       36

Как мне показать контент, когда Javascript недоступен, скрыть его, когда javascript доступен, и не мерцать в любом случае?

1 голос
/ 17 июня 2009

У меня есть простая форма для параметров доставки, и я использую javascript для автоматической отправки формы, когда кто-то выбирает новую опцию из выпадающего списка.

Для поддержки браузеров без JavaScript есть также кнопка для отправки формы. Эта кнопка скрыта с помощью JavaScript.

Однако это означает, что моя кнопка видна в течение короткого периода времени и может вызвать мерцание, поскольку остальная часть содержимого переформатируется.

Может кто-нибудь предложить способ создания кнопки, чтобы она начиналась скрытой, но стала видимой, только если javascript недоступен? Например, начать с дисплея: нет; и волшебным образом изменить отображение: блок; тогда и только тогда, когда нет JavaScript.

Ответы [ 5 ]

13 голосов
/ 17 июня 2009

Просто поместите что-нибудь в теги <noscript> ... </noscript>, и тогда оно появится, только если JavaScript не включен / не доступен.

4 голосов
/ 17 июня 2009

Это зависит от того, как вы это скрываете, используете ли вы DOM ready или окно готово? Готово окно ожидает загрузки всех изображений, что обычно слишком долго.

По причинам доступности я бы спрятал его в загруженном DOM. Но чтобы убедиться, что он не будет отображаться, вы можете поместить его в элемент noscript 

<noscript>
    <input type="submit" />
</noscript>

Что касается вашего последнего абзаца, ничего подобного не может произойти в отсутствие JavaScript.

1 голос
/ 17 июня 2009

Просто напишите ненавязчивый javascript: http://icant.co.uk/articles/seven-rules-of-unobtrusive-javascript/.

Что вы делаете, это пишите свою страницу как обычную страницу, но затем используйте код внизу, чтобы запустить JavaScript, и начните редактировать страницу, чтобы сделать ее более интерактивной. Прелесть этого в том, что если у них отключен JavaScript, то страница нормальна, но если она включена, то вы можете изящно добавить больше возможностей.

Я не большой поклонник этой опции, поскольку это может означать, что для загрузки нужно будет загрузить дополнительный ненужный код.

На этой странице посмотрите на комментарий 5, чтобы найти хорошее решение, позволяющее вносить изменения до того, как что-либо отобразится: http://dean.edwards.name/weblog/2006/06/again/

0 голосов
/ 18 июня 2009

Одним из вариантов будет начать с показа вашей кнопки, а затем изменить ее CSS из JavaScript: 

<head>
    ...
    <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8">
    <script>
        document.styleSheets[0].addRule(".hideMe", "display:none");
    </script>
    ...
</head>

Изменение таблицы стилей вместо кнопки (и помещение этого кода вне загрузки) обеспечивает ее скрытие до отрисовки кнопки.

0 голосов
/ 17 июня 2009

Вы можете использовать скрипт до и после кнопки отправки, чтобы написать скрытые теги начала и конца элемента div.

...