Допустимый способ добавления noscript в голову для переноса перенаправления

Итак, я думал, что простой способ справиться с отключенным в браузере javascript будет следующим:

<head>
        <title>JavaScript Test</title>
        <noscript>
                <meta http-equiv="Refresh"
                        content="1;url=nojs.html" />
        </noscript>
</head>

И имея nojs.html имеет что-то вроде:

<p>Return to <a href="jstest.html">test</a> after enabling javascrpt.</p>

На странице сбоя.

Это не мой предпочтительный метод, но он приятный и простой, пока что-то более грациозное не может быть разработано для пользователей без javascript.

Однако недействительно помещать элемент <noscript> в раздел head. Предварительные тесты все равно работали, но я суеверен, когда дело доходит до того, что мой код действителен, плюс я бы не хотел, чтобы это действительно провалило полевой тест.

Итак, существует ли правильный способ сделать это? Возможно, обертка noscript в другом элементе, как тег объекта? Или какой-то еще более простой способ, о котором я не думаю?

Ответ 1

Я не уверен, почему вам нужно перенаправить на другую страницу, а не просто показывать сообщение. Я использую JS и немного CSS для обработки этих ситуаций для меня. Что-то вроде этого:

<head>
   ....
   <script type="text/javascript"> document.documentElement.className += " js"</script>

   <link rel="stylesheet" type='text/css' href="css/layout.css" media="all" />
</head>
<body>
    <div id="noscript">Please enable JavaScript, then refresh this page. JavaScript is required on this site</div>
    <div id="wrapper">
       ...
    </div>
</body>

Тогда в layout.css:

 #wrapper      { display: none  } /* Hide if JS disabled */
 .js #wrapper  { display: block } /* Show if JS enabled */
 .js #noscript { display: none  } /* Hide if JS enabled */

Таким образом, класс применяется к элементу html до отображения страницы, поэтому вы не получите мерцание, поскольку содержимое не-JS будет выгружено для содержимого JS.

Ответ 2

Решение Doug довольно хорошо, но у него есть несколько недостатков:

Недопустимо иметь атрибут класса в элементе html. Вместо этого используйте тело.
Для этого требуется, чтобы вы знали, какой тип отображения задает элемент (т.е. ".js #wrapper { display: block }" ).

Более простым, более правильным и гибким решением с использованием того же подхода может быть:

<html>
    <head>
        <!-- put this in a separate stylesheet -->
        <style type="text/css">
            .jsOff .jsOnly{
                display:none;
            }
        </style>
    </head>

    <body class="jsOff">
        <script type="text/javascript">
            document.body.className = document.body.className.replace('jsOff ','');
        </script>

        <noscript><p>Please enable JavaScript and then refresh the page.</p></noscript>

        <p class="jsOnly">I am only shown if JS is enabled</p>
    </body>
</html>

При этом он действителен html (нет атрибута класса для элемента html). Это проще (меньше CSS). Он гибкий. Просто добавьте класс "jsOnly" к любому элементу, который вы хотите отображать только при включенном JS.

Ответ 3

Тег <noscript> не может находиться в <head>, он должен находиться в <body>

Общей практикой является отображение сообщения вместо перенаправления, поскольку нет возможности перенаправлять только в том случае, если javascript отключен.

Вы можете сделать это наоборот, на первой странице будет nojs.html, а на этой странице используйте javascript для перенаправления на основной контент.

Ответ 4

Если вам действительно нужен правильный способ сделать это, сделайте вашу главную страницу страницей nojs.htm и используйте JS, чтобы скрыть весь контент до его показанного пользователю и сразу же перенаправить на настоящую главную страницу с помощью javascript.

Ответ 5

Мне нравится решение Дуга. Однако, если вам нужно перенаправить, я бы помнил, что, хотя есть спецификация и стандарт, мир веб-браузеров - это грязный, несовершенный мир. Независимо от того, разрешено ли спецификацией что-то, не так важно, как независимо от того, работает он или нет в наборе браузеров, о которых вы заботитесь.

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

Ответ 6

Как насчет:

noscript{
z-index:100;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
min-height:1024px; background:#FFF;
}

<noscript>
<p>Please <a href="no_js_instructions.php">enable Javascript</a> on your browser.</p></noscript>