Как обернуть тег <noscript>, чтобы скрыть содержимое при отключении javascript

Скажем, у меня есть код HTML следующим образом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
This is content.
</body>
</html>

И я хочу добавить там тег <noscript>. Это означает, что если JavaScript отключен, он будет отображаться как пустая страница.

И только когда JavaScript отключен, он покажет "Это текст содержания".

Пожалуйста, дайте мне несколько примеров для достижения. Спасибо.

Ответы

Ответ 1

Альтернативой JS-подходу, предложенной rahul, является отображение div в элементе <noscript>, охватывающий всю страницу:

<noscript>
    <div style="position: fixed; top: 0px; left: 0px; z-index: 3000; 
                height: 100%; width: 100%; background-color: #FFFFFF">
        <p style="margin-left: 10px">JavaScript is not enabled.</p>
    </div>
</noscript>

Ответ 2

Оберните все содержимое внутри основного div с дисплеем none и в функции onload измените отображение на блок.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
</head>
<body>
  <div id="divMain" style="display: none">
    This is content.
  </div>
<noscript>
  JS not enabled
</noscript>
<script>
  document.getElementById("divMain").style.display = "block";
</script>
</body>
</html>

Ответ 3

Это немного странно.

Для этого вам даже не нужен "noscript". Вы можете просто иметь пустую первую страницу, которая только содержит javascript формы:

document.location = '/realpage.htm';

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

Edit:

Пример, в соответствии с запросом:

<html>
<body onload="document.location = 'realpage.html';">
</body>
</html>

Ответ 4

Тег noscript работает наоборот. Чтобы сделать контент видимым, когда script включен, поместите его в скрытый элемент и покажите его с помощью script:

<div id="hasScript" style="display:none">
This is content
</div>
<script>document.getElementById('hasScript').style.display='';</script>

Ответ 5

Этот СЛЕДУЕТ действительно работает! скрыть содержимое, когда javascript не включен Примечание. вы можете заменить <noscript> на <noembed> или <noframes> тоже.

<!-- Normal page content should be here: -->
Content
<!-- Normal page content should be here: -->
<noscript>
<div style="position: absolute; right: 0; bottom: 0;
     display: none; visibility: hidden">
</noscript>
<-- Content that should hide begin -->
**Don't Show! Content**
<-- Content that should hide begin -->
<noscript>
</div>
</noscript>
<!-- Normal page content should be here: -->
Content
<!-- Normal page content should be here: -->

Ответ 6

Вы можете сделать что-то вроде

<body id="thebody">
  this is content.
  <script>
    document.getElementById('thebody').innerHTML = "<p>content when JS is enabled!";
  </script>
</body>

Ответ 7

У меня была очень большая проблема:

Я хотел показать полный сайт, когда был включен javascript. Однако, если javascript был отключен, я не только хотел показать сообщение "этот сайт требует javascript...", но я все же хотел отобразить верхний и нижний колонтитулы (которые находятся в header.inc и footer.inc, вызванные каждой странице контента) моего сайта (чтобы выглядеть красиво). Другими словами, я только хотел заменить основную область содержимого моего сайта. Здесь мое решение html/css:

Файл заголовка (место не важно):

<noscript>
    <style>
        .hideNoJavascript {
            display: none;
        }  
        #noJavascriptWarning {
            display: block !important;
        }
    </style>
</noscript>

Файл заголовка (внизу):

<div id="noJavascriptWarning">The Ignite site requires Javascript to be enabled!</div>
<div class="container-fluid hideNoJavascript">
<!-- regular .php content here -->

Файл CSS:

#noJavascriptWarning {
    color: #ed1c24;
    font-size: 3em; 
    display: none;  /* this attribute will be overridden as necessary in header.inc */
    text-align: center;
    max-width: 70%;
    margin: 100px auto; 
}

В заключение, мое сообщение "javascript required" скрыто в моем правиле CSS по умолчанию. Однако, когда браузер анализирует тег, он переопределяет правило по умолчанию, в результате чего основной контент скрыт и (все, кроме заголовка/нижнего колонтитула), и отображаемое сообщение javascript. Прекрасно работает... для моих нужд! Надеюсь, кто-то найдет это полезным: -)

Вот два скриншота с включенным/отключенным javascript:

Ответ 8

Показать сообщение Your browser does not support JavaScript! после этого перенаправить на другую страницу

<noscript>Your browser does not support JavaScript!
    window.location.href = "http://example.com" // redirect to other page
    </noscript>