Я хочу отметить сообщение, если javascript отключен на стороне клиента. Я искал здесь и нашел тег <noscript>, который будет использоваться для обработки этого материала.
Я сделал это в редакторе w3schools, чтобы проверить, но его не работает, дайте мне знать, если этот <noscript> не предназначен для этого или чего-то еще, чего я не вижу в этой части?
Попробуйте следующее: -
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", чтобы показать некоторое предупреждающее сообщение.
Надеюсь, это поможет вам.
Вы правы. Тег <noscript> используется для отображения только в том случае, если JavaScript отключен.
Чтобы проверить этот, выполните следующие действия:
Как вы можете видеть, вы можете поместить любой HTML в тег <noscript>, который вы разместили бы внутри тела страницы.
<html>
<body>
<h1>Simple Example Page</h1>
<script type="text/javascript">
document.write("Hi, JavaScript is enabled!");
</script>
<noscript>
<div style="border: 1px solid purple; padding: 10px">
<span style="color:red">JavaScript is not enabled!</span>
</div>
</noscript>
</body>
</html>
<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>
Поместите сообщение "не поддерживает" в div и используйте JavaScript, чтобы скрыть div при загрузке страницы
<noscript> предназначен для такого рода вещей, так же как <script> предназначен для JS. Имейте в виду, что с помощью обновления метатега:
<noscript>
<META HTTP-EQUIV="Refresh" CONTENT="0;URL=ShowErrorPage.html">
</noscript>
означает, что это легко отключить в IE (по крайней мере, на IE10), увеличив безопасность интернет-безопасности (что, вероятно, было использовано для отключения JS в первую очередь). Параметр "разрешить META REFRESH" отключается, когда настройка безопасности увеличивается.
Вы можете использовать тот же метод, который используется stackoverflow. См. Мою ссылку jsfiddle. Когда Javascript отключен, в первом блоке noscript, сразу после тега body, вы переходите к добавлению padding-top в пустой дочерний 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;
}