Как обернуть тег ‹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 отключен, он покажет «Это текст содержимого».

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


noscript
person Community    schedule 16.09.2009    source источник

Ответы (8)


arrow_upward
60
arrow_downward

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

<noscript>
    <div style="position: fixed; top: 0px; left: 0px; z-index: 30000000; 
                height: 100%; width: 100%; background-color: #FFFFFF">
        <p style="margin-left: 10px">JavaScript is not enabled.</p>
    </div>
</noscript>
person Dan Alvizu    schedule 02.05.2011
comment
Великолепно! я бы проголосовал за это, но у меня не включен javascript .. :-) - person Noel Abrahams; 02.03.2012

arrow_upward
26
arrow_downward

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

<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>
person rahul    schedule 16.09.2009
comment
спасибо, это работает. Просто хочу узнать еще один вопрос: даже если мы добавим тег noscript, смогут ли они по-прежнему просматривать исходный код? - person ; 16.09.2009
comment
Да, конечно, noscript не имеет ничего общего с генерацией HTML. - person rahul; 16.09.2009
comment
а окей. Спасибо за ваш быстрый и быстрый ответ. - person ; 16.09.2009

arrow_upward
5
arrow_downward

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

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

document.location = '/realpage.htm';

А затем вызовите этот OnLoad с помощью jQuery или как-то еще. Это будет означать, что если у клиента нет сценария, он никуда не пойдет, поэтому страница останется пустой.

Редактировать:

Пример, как просили:

<html>
<body onload="document.location = 'realpage.html';">
</body>
</html>
person Noon Silk    schedule 16.09.2009
comment
привет, шелковистый, я тоже хочу попробовать твой способ. Но так как от недостатка знаний. Я не знаю, как это сделать. Можете ли вы написать пример кода для тестирования? Спасибо. - person ; 16.09.2009
comment
Шелковистый спасибо за ответ. Понятно. - person ; 16.09.2009
comment
Если ваш сайт не позволяет пользователю попасть на него только через одну страницу шлюза, вам нужно две страницы для каждой страницы, которую вы хотите отобразить. Ага? Или иметь только одностраничные веб-сайты. - person Bill Rosmus; 08.10.2012
comment
Мне очень нравится, что этот подход позволяет разделить задачи представления. Предыдущие методы работают, но позже их будет сложнее поддерживать, +1 и молодец! - person drognisep; 08.08.2016

arrow_upward
5
arrow_downward

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

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

arrow_upward
4
arrow_downward

Это ДОЛЖНО действительно работать! скрывать содержимое, когда отключен 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: -->
person David Refoua    schedule 17.09.2011

arrow_upward
2
arrow_downward

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

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

Файл Header.inc (расположение не важно):

<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» скрыто в соответствии с моим правилом CSS по умолчанию. Однако, когда браузер анализирует тег, он переопределяет правило по умолчанию, в результате чего основной контент скрывается и (все, кроме верхнего/нижнего колонтитула) и отображается сообщение javascript. Работает идеально ... для моих нужд! Надеюсь, кто-то еще найдет это полезным :-)

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

введите здесь описание изображения

введите здесь описание изображения

person psterling    schedule 20.12.2016

arrow_upward
2
arrow_downward

И тег стиля, и метаобновление ДЕЙСТВИТЕЛЬНО работают внутри noscript:

<noscript>

<style>body { display:none; }</style>

<meta http-equiv="refresh" content="0; url=blankpage.html">

</noscript>

Первая строка будет отображать текущую страницу, но пустую. Вторая строка будет перенаправлена ​​на blankpage.html.

person Sebastian H    schedule 06.03.2018

arrow_upward
2
arrow_downward

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

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