Разве мы не должны использовать элемент <noscript>? - PullRequest
Новая
       42

Разве мы не должны использовать элемент <noscript>?

65 голосов
/ 31 января 2010

Я нашел здесь несколько хороших минусов:

  • Элемент noscript определяет только, включен ли в браузере JavaScript или нет.Если JavaScript отключен в брандмауэре, а не в браузере, JavaScript не будет работать, и содержимое элемента noscript не будет отображаться.

  • Многие сценарии зависят от конкретной функцииили возможности поддерживаемого языка, чтобы они могли работать (например, document.getElementById).Если требуемые функции не поддерживаются, JavaScript не может быть запущен, но поскольку поддерживается сам JavaScript, содержимое noscript не будет отображаться.

  • Самое полезное место для использования элемента noscript - этозаголовок страницы, где можно было бы выборочно определить, какие таблицы стилей и метаэлементы применяются к странице при загрузке страницы, а не ждать загрузки страницы.К сожалению, элемент noscript действителен только в теле страницы и поэтому не может использоваться в заголовке.

  • Элемент noscript является элементом уровня блока и, следовательно, может использоваться только для отображенияцелые блоки контента, когда JavaScript отключен.Его нельзя использовать встроенным.

  • В идеале веб-страницы должны использовать HTML для содержимого, CSS для внешнего вида и JavaScript для поведения.Использование элемента noscript - это применение поведения изнутри HTML, а не его применение из JavaScript.

Источник: http://javascript.about.com/od/reference/a/noscriptnomore.htm

Я очень согласен с последним пунктом.Есть ли способ сделать и добавить внешний <noscript> файл?Должны ли мы поместить <noscript> в <head>?

Ответы [ 11 ]

44 голосов
/ 31 января 2010

Лучше иметь значение по умолчанию не-javascript, а затем позволить перезаписать код javascript страницей с поддержкой javascript. Не должно быть много. Может быть просто блоком display:none;, который затем устанавливается в javascript на display:block;, и наоборот для страницы не-js.

24 голосов
/ 07 мая 2012

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

<div id='noscript'>show non-js content</div>
<script>document.getElementById('noscript').style.display='none';</script>
<script id='required script'>show js content</script>

против 

<noscript>show non-js content</noscript>
<script id='required script'>//show js content</script>

В зависимости от ситуации, есть три случая для рассмотрения:

Случай 1 - Если требуется, скрипт является встроенным

JavaScript отключен

  • Содержимое в элементе <noscript> появляется немедленно, содержимое не-js показан
  • Содержимое в элементе <div> появляется немедленно, отображается содержимое не-js

JavaScript включен

  • Содержимое в элементе <noscript> не отображается вообще, отображается содержимое js
  • Содержимое элемента <div> может на мгновение появиться перед тем, как быть скрытым, js показанный контент

В этом случае целесообразно использовать элемент <noscript>.

Случай 2 - если требуется скрипт из внешнего (стороннего) источника, но скрытие элемента <div> выполняется с помощью встроенного скрипта

JavaScript отключен

  • Содержимое в элементе <noscript> появляется сразу, содержимое не-js показан
  • Содержимое в элементе <div> отображается немедленно, содержимое не в формате js отображается

JavaScript включен, но необходимый скрипт заблокирован

  • Содержимое элемента <noscript> вообще не отображается, ничего не отображается!
  • Содержимое элемента <div> может на мгновение появиться перед тем, как быть скрытым, ничего не отображается!

JavaScript включен и требуемый скрипт получен

* * 1068 Содержимое в элементе <noscript> не отображается вообще, отображается содержимое js Содержимое элемента <div> может на мгновение появиться перед тем, как быть скрытым, js показанный контент

В этом случае целесообразно использовать элемент <noscript>.

Случай 3 - При необходимости скрипт скрывает элемент <div>

JavaScript отключен

  • Содержимое в элементе <noscript> появляется немедленно, содержимое не-js показан
  • Содержимое в элементе <div> появляется сразу, отображается содержимое не-js

JavaScript включен, но необходимый скрипт заблокирован

  • Содержимое элемента <noscript> вообще не отображается, ничего не отображается!
  • Отображается содержимое в элементе <div>, отображается содержимое не-js

JavaScript включен и требуемый скрипт получен

  • Содержимое в элементе <noscript> не отображается вообще, отображается содержимое js
  • Содержимое элемента <div> может на мгновение появиться перед тем, как быть скрытым, js показанный контент

В этом случае целесообразно использовать элемент <div>.

В итоге

Используйте элемент <noscript>, если рендеринг содержимого HTML зависит от сторонних сценариев или если требуемый сценарий встроен. Иначе, используйте элемент <div> и убедитесь, что требуемый скрипт содержит: 

document.getElementById('noscript').style.display='none';
8 голосов
/ 18 августа 2011

Хотя у Tor Valamo есть изящный ответ на эту проблему, есть проблема, которая может заставить вас отказаться от использования этой техники.

Проблема (обычно) в IE. Он имеет тенденцию загружать и выполнять JS немного медленнее, чем другие браузеры, в результате чего он иногда мигает div «Please Enable Your Javascript» на долю секунды, прежде чем загружать JS и скрывать div.

Это раздражает, и для обхода этого можно реализовать «классику». <noscript> подход перенаправления. 

<head>
<noscript><meta http-equiv="refresh" content="0; URL=/NO_SCRIPT_URL/ROUTE_HERE"/></noscript>
</head>

Это самая надежная техника, с которой мне приходилось сталкиваться в связи с этой маленькой мерзостью.

7 голосов
/ 27 ноября 2012

Одно полезное приложение для noscript, которое я видел, - для прогрессивно улучшенной асинхронной загрузки тяжелого контента (особенно «ниже сгиба»). Большие изображения, фреймы и т. Д. Можно обернуть в исходный код HTML в noscript, а затем развернутые элементы можно добавить на страницу с помощью JavaScript после того, как DOM будет готов. Это разблокирует страницу и может значительно ускорить начальную загрузку, особенно если ваш интерфейс использует взаимодействия JS / JQ, применяемые после того, как документ готов (2 секунды против 6 секунд для страницы портфолио, с которой я консультировался).

5 голосов
/ 10 июня 2015

В наши дни кажется, что почти каждый браузер использует Javascript, но вы никогда не узнаете, кто будет получать доступ к вашему сайту.В наши дни даже программы чтения с экрана и веб-сканеры используют Javascript и иногда отправляют запросы AJAX, если они должны.нет-Javascript, есть гораздо лучший способ, чем тег <noscript>.Просто сделайте это в HEAD вашего документа: 

<script type="text/javascript">
    document.getElementsByTagName('html')[0].className += ' Q_js'; // better than noscript
</script>

С помощью этой техники вы можете легко обратиться к классу Q_js в вашем CSS, чтобы скрыть вещи.С тегом <noscript> лучшее, на что вы можете надеяться, это включить дополнительный файл CSS для переопределения предыдущего CSS.Это становится важным, когда некоторые элементы со статическим содержимым должны быть скрыты сразу (не мерцать), пока Javascript не сможет сделать их более динамичными.Я считаю, что это строго лучше, чем использовать <noscript>.

2 голосов
/ 18 июня 2018

В ближайшем (надеюсь, ближайшем) будущем вы сможете использовать css-скриптинг : 

@media (scripting: none) {
    /* styles for when JS is disabled */
}
1 голос
/ 13 января 2016

простая идея: в настоящее время ваш сайт может адаптироваться к отсутствию использования javascript на медленных устройствах с использованием тега noscript как объекта для всего содержимого вашего сайта ** ( ваш html должен быть подготовлен к отсутствию javascript и всех остальных элементы управления также должны работать, если javascript отключен, пользователи, использующие базовые элементы управления html, смогут делать все, что они делали до того, как javascript был активен. Поэтому <noscript></noscript> может быть динамическим переключением на то же содержимое другим способом с теми же результатами = решение проблема в том, почему пользователи открывают ваш URL ). ** Вы можете видеть, неважно, присутствует ли javascript или нет, функциональность веб-сайта может быть «одинаковой» в любом случае, js включен / отключен. устройства, например: Samsung neo mini phone, этот метод может запустить веб-сайт без каких-либо задержек при низком интернет-трафике. попробуйте запустить этот автоматический двойной функциональный веб-сайт, если js включен / выключен: 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>noscript can change the Internet forever</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function(){
    $('noscript').replaceWith(function() {
        return this.textContent || this.innerText;
    });
    $("p#javascripton").css("background-color", "yellow"); 
    $("p").click(function(){
        $(this).hide();
    });
}); 
//-->
</SCRIPT>
<noscript>
<p>
Noscript's usage today can be logical for <a href="http://google.com/"><p id="javascripton">eg pc/laptop/high quality tablets usage the complete website with all features:images high resolution,javascript<br><h1>OR without javascript so no high resolutions images inserted with a jquery automated script generated from some php+javascript scripts so have usage for 80% mobile application cause almost are from China ,so low quality products=low cpu,low ram :IN THIS CASE SOMEONE CAN THINK TO SWITCH HIS PHONE TO NO JAVASCRIPT USAGE SO IF ANY PROGRAMMER CAN ADAPT AN ENTIRELY APPLICATION TO THE METHOD I USED IN THIS EXAMPLE AUTOMATED HIS BROWSER IS ADAPT FOR ANY RANDOM ACTION ABOUT THE USER CHOISE(YOU UNDERSTAND "TO USE OR NOT JAVASCRIPT") SO HIS CHINESE PHONE CAN BE APROXIMATELLY APROACH LIKE QUALITY OF SPEED EXECUTION THE OTHERS PC/LAPTOPS/TABLETS QUALITY PRODUCTS.<BR><BR>This stupid example is the best example how no script tag can change the quality of services on this planet ,boost the speed of the internet connection and stops unnecessary use of A LOT OF INTERNET TRAFFIC on slow devices..a simple tag can change the entirely dynamic of programmer's views so entirely Planet's beneficts</h1><p></a> <br>
run this code in two instances :<br>with browser javascript enable <br>and without(browser's javascript disable or eg a firefox plugin noscript states on/off)
</p>
</noscript>
</BODY></HTML>

и чтобы сказать больше об этом .. правильный noscript был изобретен, чтобы работать как триггер, когда js отключен, но вы можете обойти эту функцию, чтобы изменить ход интернет-функциональности о том, как сейчас, чтобы изменить ее динамику ... .

0 голосов
/ 30 августа 2018

Элемент "noscript" не поддерживается в XML или в полиглоте XHTML5, поэтому не рекомендуется W3C.

Мне также не нравится идея, что каждая страница начинается с просматриваемого без сценария div, который затем скрывается каким-то цирковым трюком Javascripted на каждой странице веб-сайта. Опасные и более зависимые от сценариев зависимости, которые могут потерпеть неудачу или нанести ущерб, если будут изменены более поздним разработчиком.

Лучшей стратегией является создание вашего сайта с базовым html-дизайном, который охватывает весь внутренний скриптовый контент, так что пользователь, по крайней мере, видит дизайн страницы с заголовком и местом, где будет отображаться основной контент. Если он пуст, он довольно очевиден, они не могут просматривать контент по какой-то причине. Затем я добавил бы крошечное сообщение или значок информации в нижнем колонтитуле, если вы не видите контента, ваш javascript отключен. Появляется ли они видят скриптовый контент или нет. Это решение не содержит сценариев.

В качестве последнего средства вы можете сделать так, чтобы это сообщение было скрыто сценариями с использованием display: ни одного в нижней части каждой веб-страницы.

Это не так привлекательно, как предоставление альтернативного контента или окна сообщений, но в случае тяжелых веб-сайтов Angular вам в любом случае придется создать для них новую страницу контента, если сценарии отключены. Это решение также учитывает отсутствие поддержки сценариев в пользовательском агенте по сравнению с отключенной поддержкой и делает вашу веб-страницу на 100% совместимой со всеми пользовательскими агентами XML и HTML5, избегая тега noscript.

0 голосов
/ 29 августа 2018

Как и все, используйте правильный инструмент для работы.

Если вы используете API Карт Google, у вас есть статическое изображение с помощью тега, которое заменяется динамической картой JS. Google недавно начал взимать плату за все, поэтому с приведенным выше примером это будет стоить вам дважды, один раз для статического и один для динамического. Статическая карта актуальна только если JS отключен. Поэтому, чтобы сохранить двойную оплату, мне кажется, что лучшее решение - обернуть тег для статической карты в тег.

0 голосов
/ 17 мая 2013

Я создаю полную высоту, полную ширину, положение: фиксированный div на всех страницах с некоторым идентификатором. 

<div id='noscript_div' style='position:fixed;z-index:20000000;height:100%;width:100%;line-height:100%;'>enable JS buddy</div>
$('#noscript_div').hide();
$(document).ready(function(event){




});

Я не эксперт. Это сработало для меня. Извините, но этот случай подойдет только в том случае, если вы хотите, чтобы пользователь всегда включал JavaScript,

Страница:
...