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

StackOverflow https://stackoverflow.com/questions/1006798

Вопрос

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

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

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

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

Это было полезно?

Решение

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

Другие советы

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

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

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

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

Просто напишите ненавязчивый код JavaScript: http://icant.co .uk / статьи / семь-правила-оф-ненавязчивого-JavaScript / .

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

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

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

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

Одним из вариантов будет начать с показа вашей кнопки, а затем изменить ее 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>

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

Не связан с StackOverflow
scroll top