25

Let's say, I have HTML code like this:

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

And I want to add a <noscript> tag there. Which means, if the JavaScript disabled, it will show as a blank page.

And only when JavaScript is disabled, it will show "This is content text".

Please give me some examples to achieve. Thanks.

RyanS
  • 627
  • 1
  • 10
  • 26

9 Answers9

62

An alternative to a JS approach as suggested by rahul is to display a div in the <noscript> element, covering the entire page:

<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>
HoldOffHunger
  • 18,769
  • 10
  • 104
  • 133
Dan Alvizu
  • 1,291
  • 9
  • 23
25

Wrap all you contents inside a main div with display none and in the onload function change the display to block.

<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>
Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438
rahul
  • 184,426
  • 49
  • 232
  • 263
  • thanks it's working. Just want to know another question that, even if we add noscript tag, can they still view the source code ? –  Sep 16 '09 at 06:49
  • Yes of course, noscript has nothing to do with HTML generation. – rahul Sep 16 '09 at 06:53
  • ah okie. Thanks for your quick and fast response. –  Sep 16 '09 at 07:04
6

The noscript tag works the other way around. To make the content visible when script is enabled, put it in an element that is hidden, and show it using script:

<div id="hasScript" style="display:none">
This is content
</div>
<script>document.getElementById('hasScript').style.display='';</script>
Guffa
  • 687,336
  • 108
  • 737
  • 1,005
5

It's a little odd.

You don't even need a 'noscript' for this. You can just have a blank first page, who's only content is a javascript of the form:

document.location = '/realpage.htm';

And then call that OnLoad, with jQuery, or whatever. This will mean if the client doesn't have scripting, they don't go anywhere, hence the page remains blank.

Edit:

Example, as requested:

<html>
<body onload="document.location = 'realpage.html';">
</body>
</html>
Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438
Noon Silk
  • 54,084
  • 6
  • 88
  • 105
  • hi silky, I want to try your way too. But since of the lack of knowledge. I don't know how to do. Can you write the sample code for me to test ? Thanks. –  Sep 16 '09 at 06:53
  • Thanks for your response silky. Got it. –  Sep 16 '09 at 07:08
  • Unless your site only allows a user to get to it through one gateway page you need two pages for every page you want to display. Yeah? Or only have one page web sites. – Bill Rosmus Oct 08 '12 at 08:33
  • I really like that this approach allows for a separation of concerns for the view. The previous methods work, but would make it harder to maintain later, +1 and good job! – drognisep Aug 08 '16 at 16:29
4

Both the style tag and the meta refresh DO work inside noscript:

<noscript>

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

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

</noscript>

The first line will display the current page but empty. The Second line will redirect to blankpage.html

Sebastian H
  • 109
  • 1
  • 6
4

This SHOULD really work! hide a content when javascript is not enabled Note: you can replace <noscript> with <noembed> or <noframes>, too.

<!-- 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: -->
Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438
David Refoua
  • 3,476
  • 3
  • 31
  • 55
2

You could do something like

<body id="thebody">
  this is content.
  <script>
    document.getElementById('thebody').innerHTML = "<p>content when JS is enabled!</p>";
  </script>
</body>
HoldOffHunger
  • 18,769
  • 10
  • 104
  • 133
Alex Martelli
  • 854,459
  • 170
  • 1,222
  • 1,395
2

I had a very problem:

I wanted to show the full site when javascript was enabled. However, if javascript were disabled, not only did I want to show a "this site requires javascript..." message, but I still wanted to display the header & footer (which reside in header.inc and footer.inc, called by each content page) of my site (to look nice). In other words, I only wanted to replace the main content area of my site. Here's my html/css solution:

Header.inc file (location not important):

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

Header file (bottom):

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

CSS file:

#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; 
}

In summary, my "javascript required" message is hidden per my default CSS rule. However, when the browser parses the tag, it overrides the default rule, resulting in main content being hidden and (everything except header/footer) and the javascript message being displayed. Works perfectly...for my needs! Hopefully someone else finds this useful :-)

Here are two screenshots with javascript enabled/disabled:

enter image description here

enter image description here

psterling
  • 75
  • 7
0

I know this is an old inquire, but somehow none of this things worked in one of the PHP page I created. Below is what worked, the important thing was the comment tag between the noscript tag:

    <noscript>
    <center><div style="font-size:300%;position: absolute;top: 40%;left: 50%;margin-right: -50%;transform: translate(-50%, -50%)">
    Scripts are Required...
    <meta http-equiv='refresh' content="1;url=http://flstate.us/NoScript"/>
    </div> </center>
    
    <!-- 
    </noscript>
    
    <html>
    <body>
    
    Page HERE...
    
    </body>
    </html>
    

<noscript>  --> </noscript>
Ramon Maldio
  • 72
  • 5