Показать сообщение, если javascript отключен на стороне клиента с помощью тега noscript

Я хочу отметить сообщение, если javascript отключен на стороне клиента. Я искал здесь и нашел <noscript> тег для использования для обработки этого материала.

Я сделал это в Редакторе w3schools, чтобы проверить, но он не работает, дайте мне знать, если это <noscript> не предназначен для этого или чего-то еще, чего мне не хватает в этой части ?

enter image description here

16
javascript noscript

6 ответов

Попробуйте Это :-

How to detect JavaScript is disabled in browser?

как мы знаем, тег используется для JavaScript. Таким же образом есть тег, который вступает в действие, когда JavaScripts отключен в браузере.

<script>Put Sample code here for execution when JavaScript is Active </script>
<noscript>Put Sample code here for execution when JavaScript is Disabled</noscript>

как обрабатывать отключенный JavaScript в браузере?

когда JavaScript отключен, просто попытался перенаправить на какую-то страницу, где мы можем отобразить сообщение о том, что Javascript отключен. Существует мета-тег в HTML с именем "meta refresh", который перенаправит пользователя на другую страницу в интервал, указанный в этом заголовке.

<noscript>
  <META HTTP-EQUIV="Refresh" CONTENT="0;URL=ShowErrorPage.html">
</noscript>

как мы видим выше код внутри noscript, есть тег " meta refresh "с интервалом" 0 " секунд. Поскольку JavaScript отключен на этой странице, браузер перенаправляется на " ShowErrorPage.html", чтобы показать предупреждение.

Я надеюсь, что это поможет вам.

37

ты прав. The <noscript> тег используется для отображения, только если JavaScript отключен. Для того, чтобы

7
<noscript>
   <META HTTP-EQUIV="Refresh" CONTENT="0;URL=ShowErrorPage.html">
</noscript>

не является хорошим решением, так как IE11 (и предыдущий) имеют параметр безопасности, который при установке на "высокий" отключает Теги Javascript и Meta Refresh!

лучшее решение, которое я нашел для обработки этого случая:

<noscript class="noscript">
   <div id="div100">
   Please enable javascript in your browser .... blah blah
   </div>
</noscript>

<style>
   body{
      position:relative;
   }
   .noscript {
      width:100%;
      height:100%; /* will cover the text displayed when javascript is enabled*/
      z-index:100000; /* higher than other z-index */
      position:absolute;
   }
   .noscript #div100{
       display:block;
       height:100%;
       background-color:white; 
   }
</style>
6

<noscript> предназначен для такого рода вещи, как <script> предназначен для JS. Имейте в виду, что использование meta tag refresh:

<noscript>
  <META HTTP-EQUIV="Refresh" CONTENT="0;URL=ShowErrorPage.html">
</noscript>

означает, что это легко отключается в IE (IE10 по крайней мере) путем повышения безопасности интернет-опций (который, вероятно, использовался для отключения JS в первую очередь). Параметр "Разрешить обновление META" отключается при увеличении параметра безопасности.

2

поместите сообщение "не поддерживает" в div и используйте JavaScript, чтобы скрыть div при загрузке страницы

1

вы можете использовать тот же метод, что и stackoverflow. См. Мой jsfiddle ссылку. Когда Javascript отключен, в первом блоке noscript, сразу после тега body, вы идете, чтобы добавить заполнение сверху к пустому дочернему div, так что вы можете добавить содержимое, которое вы хотите в своем теле, а затем, в конце концов, другой блок noscript с фиксированной позицией div внутри, имея предупреждающее сообщение, которое вы хотите. Попробуйте запустить его с включенным javascript и без него. Дай мне знать! :)

посмотреть код здесь: https://jsfiddle.net/go60f00n/

<noscript>
         <div id='noscript_padding'></div>
      </noscript>
      <div>
         <p>Lorem ipsum dolor sit amet consectetuer tincidunt nunc ac faucibus mattis. Gravida tempus turpis Morbi vitae sed Suspendisse auctor dignissim nulla adipiscing. Adipiscing justo lacinia justo Vivamus Vestibulum amet ut Donec vitae aliquet. Orci tempus orci Donec nibh eget tellus pede semper adipiscing leo. A et id sagittis velit venenatis.</p>
         <p>Tellus ridiculus ipsum pretium condimentum Ut elit sed vitae amet In. Curabitur ipsum elit interdum tortor semper at dolor justo consequat leo. Id fermentum vitae tincidunt pretium lacus leo Cras urna risus urna. Pretium Vestibulum et euismod nec pede et tincidunt condimentum laoreet vel. Dolor vestibulum laoreet habitant a Nulla.</p>
         <p>Lobortis lobortis quis elit mollis quis risus Morbi in augue montes. Mauris ipsum libero tellus et Quisque id non justo nibh dui. Dui nisl at Fusce Curabitur interdum tincidunt sed Vestibulum platea justo. At ut ante eget ac sem sed nulla id nunc mus. Velit In faucibus a auctor Sed Morbi habitasse est urna natoque. </p>
      </div>
      <noscript>
         <div id='noscript_warning'>Please enable Javascript!</div>
      </noscript>

Итак, код css:

html, body {
            margin: 0;
            padding: 0;
            height: 100%;
         }

         p {
            margin: 0;
         }

         #noscript_padding {
            padding-top: 1.9em;
         }

         #noscript_warning {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 101;
            text-align: center;
            font-weight: bold;
            color: #FFF;
            background-color: #AE0000;
            padding: 5px 0 5px 0;
         }
0