Question

所以我在想一个处理浏览器禁用的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包装在另一个元素中，就像对象标签一样？还是一些我想不到的更简单的方法？

Answer 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内容。

Answer 2

Doug的解决方案相当不错，但它有一些缺点：

在html元素上有一个class属性是无效的。相反，使用身体。
它要求您知道要将元素设置为的显示类型（即“.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时显示的任何元素。

Answer 3

<noscript>标记不能出现在<head>中，它必须位于<body>

通常的做法是显示消息而不是重定向，因为只有在禁用javascript时才能重定向。

你可以反过来做，第一页是nojs.html，在那个页面上使用javascript重定向到主要内容。

Answer 4

如果您真的想要一种有效的方法，请将主页设为nojs.htm页面并使用JS隐藏所有内容，然后再向用户显示，并立即使用javascript重定向到真正的主页面。< / p>

Answer 5

我喜欢Doug的解决方案。但是，如果你需要重定向，我会记得，虽然有一个规范和标准，但Web浏览器世界是一个肮脏，不完美的世界。规范是否允许某些内容并不重要，无论它是否适用于您关注的浏览器集。

只要查看任何主要网站的源代码......他们中的大多数都不会验证我打赌：）

Answer 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>

在头部添加noscript以包装重定向的有效方法

6 个答案: