34

I have a site which relies heavily on javaScript. I created a mirror site, which has all the JS as well as all the elements that require JS removed. What is a good, easy way to redirect users to the mirror site if they don't have javaScript enabled?

I tried this, but it doesn't seem very good:

<noscript>
  <meta http-equiv="refresh" content="0; URL=nojs/index.php">
</noscript>

I also tried to putting header-redirect into the noscript tag, but that didn't work.

j08691
  • 204,283
  • 31
  • 260
  • 272
zeckdude
  • 15,877
  • 43
  • 139
  • 187
  • 3
    Not trying to be nuisance, but your site shouldn't really rely on JavaScript. Where's progressive enhancement? – James Mar 22 '10 at 00:40
  • @J-P It all depends on your audience. Gmail must operate with people who don't have Javascript because it has Hotmail users. However Google Reader has a more web-savy user base, and can probably rely on Javascript being present. – Tyler Carter Mar 22 '10 at 00:41
  • Anyone wanting to dev games with open web tools should consider this – thenengah Mar 09 '11 at 14:24
  • 1
    @James providing a no-js version of an entire site is a perfectly valid way to avoid relying solely on JS - a Boolean type of progressive enhancement maybe, but if the alternative site allows the users to complete their goals where's the problem? – Toni Leigh Dec 10 '15 at 19:27

7 Answers7

80
<noscript>
    <p>This site is best viewed with Javascript. If you are unable to turn on Javascript, please use this <a href="http://sitewithoutjavascript.com">site</a>.</p>
</noscript>

Some people purposely disable Javascript, and you might want to give them a chance to turn it on before redirecting them.

Tyler Carter
  • 60,743
  • 20
  • 130
  • 150
56

Use this code that I came up with:

<noscript>
  <style>html{display:none;}</style>
  <meta http-equiv="refresh" content="0.0;url=nojs/index.php">
</noscript>

It uses style to block what's on the page so then people won't notice anything before it redirects. The only thing that annoys me is that I want something better than meta refresh as that can be blocked on some browsers like IE. A PHP header isn't really a solution as you can't put it in a noscript tag as it will just ignore it and write it out straight away.

Em1
  • 1,077
  • 18
  • 38
Ben Gollow
  • 689
  • 5
  • 4
  • I wish I could +100 this. Ben, this is an awesome answer and almost exactly what I was looking for. I changed it a bit for my needs. Instead of hiding my HTML, like you do, I only hide the content of my page (enclosed in a form tag) thus I can insert a message for the user between the noscript tags instead of relying on meta-refresh. Good job though. Your answer got me started to where I wanted to get to. – Chris Holmes Nov 03 '12 at 15:00
23

Make the no-JavaScript version of the site the default. Include a small script in there to redirect to the scripted site.

Or, abandon the use of a redirect entirely and go with Progressive Enhancement

Matt
  • 43,482
  • 6
  • 101
  • 102
  • 51
    ... thus redirecting 99% of visitors rather than 1%. Semantically, I agree with your sentiments, but all things considered I don't think it's a very good idea. – Johannes Gorset Mar 22 '10 at 00:29
  • @FRKT, Hopefully the page is cache-able, thus redirecting would be fast enough. This may be an issue with sites with lots of traffic, but with a fast enough connection I don't think this will be a major issue. Only one way to find out, of course. – strager Mar 22 '10 at 00:32
  • 6
    Well, the ideal solution in this case would be to use Progressive Enhancement instead of a redirect. – Matt Mar 22 '10 at 00:35
  • 5
    A client side redirection is annoying, because the URL that appears in the bar changes. Imagine if every time you went to google.com, it redirected you to http://www.google.com/js/ And yes, some sites do do that, but I still think it is bad practice, needlessly slowing down the client experience. – Sasha Mar 22 '10 at 00:40
  • @Sasha, Not respecting progressive enhancement is bad practice, even. – strager Mar 22 '10 at 00:42
  • I agree with FRKT and Sasha, most of the users have JS enabled, so redirecting the world instead of a few people, is a bit overkill. – N 1.1 Mar 22 '10 at 00:44
  • 4
    I decided to do Progressive Enhancement. It's a bit more work, but I see how it is better. Thanks for the suggestion! – zeckdude Mar 22 '10 at 06:55
  • @Sasha: Actually, Google DOES that. I live in Mexico and every time I type `www.google.com` in my browser, I get redirected to `www.google.com.mx`. It is done from the response headers though, not with JS. – Francisco Zarabozo Apr 09 '15 at 16:14
16

What is your definition of "not very good"?

All my sites use:

<noscript>
  <meta http-equiv="refresh" content="0; url=http://www.sadtrombone.com/" />
</noscript>
Amy B
  • 17,874
  • 12
  • 64
  • 83
  • 11
    `` is only valid inside the head, because it modifies headers. ` – Mikael S Mar 22 '10 at 01:11
  • 10
    @Mikael: 1) Having HTML validate 100% strictly according to the W3C standard is not important. 2) It works on all major browsers. – Amy B Mar 22 '10 at 01:48
  • What I mean is that the redirection is not seamless. It goes to the first site and only redirects after a split second. Therefore it is not very good. – zeckdude Mar 22 '10 at 02:56
  • 6
    This is valid HTML5 now. – user239558 Mar 14 '14 at 07:28
6

I wouldn't do client-side redirection, as that might seem annoying to the user. Instead, what I would do is use <noscript> to show the content of this JS-less site on the same page. It may be more work, but it would definitely be a smoother experience.

Sasha
  • 1,190
  • 7
  • 10
2

I came up with a better solution than having to redirect the user as meta-refresh can be disabled in IE.

Put this in the HEAD:

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

Put this in the BODY:

<noscript>NO JAVASCRIPT CONTENT HERE</noscript>

<noscript><div id="body"></noscript>JAVASCRIPT CONTENT HERE<noscript></div></noscript>

That way the tags are where they're meant to be.

Ben Gollow
  • 689
  • 5
  • 4
  • 1
    I tried this with the latest version of Chrome, and it didn't work. The content of the ` – krillgar Jul 21 '14 at 17:41
0

Just simply put this code to your html file

<meta http-equiv = "refresh" content = "2; url = https://www.google.com" />

<!DOCTYPE html>
<html>
   <head>
      <title>Redirection</title>
      <meta http-equiv = "refresh" content = "2; url = https://www.tutorialspoint.com" />
   </head>
   <body>
      <p>This page will redirect in 2 seconds.</p>
   </body>
</html>
Abu Ra1han
  • 11
  • 3