javascript - Valid way to add noscript in head for wrapping redirect

Question

Welcome To Ask or Share your Answers For Others

javascript - Valid way to add noscript in head for wrapping redirect

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Valid way to add noscript in head for wrapping redirect

So I was thinking a simple way to deal with javascript being disabled by the browser would be the following:

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

And having the nojs.html have something like:

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

At the crash page.

This isn't my preferred method, but it's nice and simple until something more graceful can be worked out for users without javascript.

However, it is not valid to put a <noscript> element in the head section. The preliminary tests worked anyway, of course, but I'm superstitious when it comes to my code being valid, plus I'd hate for this to actually fail a field test.

So is there a valid way to do this? Perhaps wrapping the noscript in another element, like an object tag? Or some even simpler way I'm not thinking of?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:30:30+0000

I am not sure why you need to redirect to another page instead of just showing a message. I use JS and a little CSS to handle these situations for me. Something like this:

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

Then in 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 */

By doing it this way, the class is applied to the html element before the page is rendered so you won't get a flicker as the non-JS content is swapped out for the JS content.

Categories

javascript - Valid way to add noscript in head for wrapping redirect

javascript - Valid way to add noscript in head for wrapping redirect

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags