-2

When I try to go to Gmail and FaceBook with my JavaScript disabled, I am greeted with the following:

Gmail, sans JS

FB, sans JS

The content in the images is displayed in <noscript> tags, but the rest of the usual page content isn't there. The Gmail source has a few empty <iframe> elements, but the FB page is empty, save for the <noscript> element, and a couple <script> tags.

I would like to have similar behaviour for my site, but am unsure how to only load the page content if the user has JS enabled. I can put in the <noscript> element, and have a div centred on screen with a "You need JS enabled" message, but the rest of the content would still have loaded behind it.

There are a couple solutions here and here, but they only have the main content as:

display: none;

and the set it to block; via JS. But that would still show up in the source.

Can I entirely prevent loading page content when JS is disabled, and only display the "Oops, you need JS enabled" message?

Community
  • 1
  • 1
Birrel
  • 4,754
  • 6
  • 38
  • 74
  • 4
    You can put a `` redirect *inside* a ` – Pointy Feb 26 '16 at 17:15
  • Not sure about facebook, but I believe Gmail builds their whole interface in javascript. Using their Closure library. So I'd expect the html code to be fairly empty without JS enabled. – jszobody Feb 26 '16 at 17:15
  • I think you answered your own question. – CollinD Feb 26 '16 at 17:16
  • Have you not looked at any of the MVC frameworks? Look at React / Polymer etc – epascarello Feb 26 '16 at 17:17

2 Answers2

1

Do not put the content in the first page, and just put a <script src="…"> which loads the actual contents via AJAX. Your source should then roughly follow that template:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="libraries.js"></script>
<script src="load-page-contents.js"></script>
</head>
<body>
<noscript>
  This website is an interactive editor for 3D graphics or something
  really complex that can't be done at all in plain HTML, and therefore
  needs JavaScript.
  Click here to read more <a href="about.html">about this project</a>.
  <img src="screenshot.jpg" alt="Obligatory screenshot, to compell the
    user to turn on JavaScript because this looks So Cool ™." />
</body>
</html>

Think twice about it, however. Does your site really need JavaScript to work? Can't at least a dumbed-down version be displayed otherwise? There are lots of reasons to have JavaScript disabled (screen readers, search engines, security issues, easy way to disable lots of blinking flashing annoying ads)

Suzanne Soy
  • 3,027
  • 6
  • 38
  • 56
  • It doesn't *need* JS to have very basic functionality, but I would like to have a simple html-based version for the noscript folks. The whole thing is based off of a highly interactive UI and many ajax calls, so a plain html version will require major layout changes, and be pretty much useless without constantly refreshing the page. – Birrel Feb 26 '16 at 20:25
  • Very helpful answer though! Will definitely keep your advice in mind. – Birrel Feb 26 '16 at 20:26
  • In the case of using ` – Birrel Feb 26 '16 at 20:30
  • [this](http://stackoverflow.com/questions/17636528/how-do-i-load-an-html-page-in-a-div-using-javascript) will do. – Birrel Feb 26 '16 at 20:55
  • 1
    @Birrel Yes, `$(body).html(content)` in JQuery style, or `body.innerHTML(content)` will work. To avoid having to escape your HTML blob in a string, you can load your `content` via AJAX from another file on the server. Instead of putting a link, maybe you could put the plain HTML file directly, with a ` – Suzanne Soy Feb 26 '16 at 22:42
0

Simply load the whole page with an AJAX request and hide the error message using Javascript. Then the error message will remain if they have Javascript disabled, and the page will be loaded if it is enabled.

rgvassar
  • 5,635
  • 1
  • 24
  • 31