views:

239

answers:

6

How to check whether the browser supports javascript?

I need to redirect the users to a Notification Page, if the user's browser don't support javascript. How can i do this in my asp.net mvc(C#) application?

Whats the best way to handle this in asp.net mvc?

The html i tested:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
    <title>Stack Overflow</title>
    <link rel="stylesheet" href="http://sstatic.net/so/all.css?v=6230"&gt;
</head>
<body>
    <noscript>
        <div id="noscript-warning">Stack Overflow works best with JavaScript enabled<img src="http://pixel.quantserve.com/pixel/p-c1rF4kxgLUzNc.gif" alt="" class="dno"></div>
    </noscript>        
</body>
</html>
A: 

Put a meta refresh in a noscript tag.

Matthew Flaschen
The noscript element is not allowed to contain meta elements.
David Dorward
A: 

I'm not really sure how you want to redirect, but you can use the <meta> tag to redirect to another page: <meta http-equiv="refresh" content="2;URL=page.aspx" />

The URL can be created by the <%=Url.Action(...)%>

Pbirkoff
In general, meta refresh is the worst possible way to issue a redirect… and this doesn't address the main point of the question — detecting a lack of JavaScript.
David Dorward
@david, i'm really interested why you think meta-refresh is the worst possible way to redirect
MysticEarth
It happens after any other way you could redirect, so it is the slowest way, and it breaks the back button.
David Dorward
meta-refresh was originally meant, as you might guess from the name, for reloading often-updated pages (at that time, typically webcam images). Most use of meta-redirect in-the-wild is misuse, by people who can't get a proper HTTP redirect running. It does have a small amount of use for referrer-blocking redirect pages, but otherwise should generally be avoided.
bobince
+2  A: 

There's no way to detect it server-side, I don't know of any browser that communicates its javascript support status to the server in the headers it sends. You should be able to use a meta refresh inside a noscript tag though:

<noscript>
    <meta http-equiv="refresh" content="0; URL=no_javascript.asp">
</noscript>

As an alternative, I would recommend doing what SO does - display a big red banner at the top of the page saying that JavaScript is required or makes the page work better.

<noscript>
    <div id="noscript">Enable JavaScript to get the most out of this site!</div>
<noscript>
Andy E
The noscript element is not allowed to contain meta elements.
David Dorward
Andy E
@Andy it works, but according to the W3C DTD it isn't allowed to place a meta-tag inside the noscript-tag
MysticEarth
@MysticEarth: I agree that it's not the best idea to use a solution that's not part of a particular specification, but we do such things every day in browsers that provide proprietary features - this is no different. But I would still go with the alternative of displaying a div instead, explaining the requirement of javascript on the current page.
Andy E
@Andy amen to that :)
MysticEarth
@Andy E: The HTML specification.
David Dorward
+1 for edit, this is usually the best thing for pages that really do rely on JavaScript (where you can't make them nice and progressive-enhancementy)
bobince
@David Dorward: Do you *always* do what the HTML specification tells you to do? ;-) (kidding)
Andy E
@Andy - The specification can be thought of as a contract. We do what it says. Browsers do what it says. Everybody is happy. Obviously, browsers have bugs, and try to recover when authors fail to follow the specification, but depending on that recovery means depending on one or more particular browsers recovering in a particular way and is a very long way from being future proof. It also means having to ignore errors reported by QA tools (which can hide errors you actually care about in amongst a cloud of ones you've decided to ignore).
David Dorward
@David: I did say I was kidding. I totally agree with you that following specification where possible is the best way to go. Hence my edit to suggest an alternative over 20 minutes ago.
Andy E
A: 

A very hacky approach would be to:

  1. Set a cookie using JavaScript

  2. Use a meta refresh to redirect (this is the worst possible way to redirect, but the only one that will occur after some JS runs if JS is available and still work if JS is not available)

  3. Check for the presence of the cookie on the page being redirected to and issue a 302 to either a JS present or a JS not-present page.

This would fail if cookies or JavaScript were disabled or unsupported though.

If you step back and try to solve the problem of "Some users don't have JS" properly (rather than going directly to "Try to detect users without JS") then use progressive enhancement and follow rule 2.

David Dorward
Why is a hacky approach any better than using a meta refresh in a noscript tag, an approach that works?
Andy E
Besides the issues of requiring cookies /and/ JS, this requires two redirects.
Matthew Flaschen
I think it's not only hacky, but also kinda crappy. Because with this approach you don't know if users disabled cookies OR javascript.
MysticEarth
@Andy E: That isn't allowed in HTML
David Dorward
@MysticEarth - it is the only valid way I can think of to achieve the stated goal. I *did* recommend using alternative approaches.
David Dorward
+3  A: 

Wow at all the -1. Erm, well... it may not be valid, but the meta-in-noscript hack (as everyone's already posted and been voted down for) really is the only way to do what you want. But:

I need to redirect the users to a Notification Page, if the user's browser don't support javascript

I think what you want isn't what you need. No-JS redirection is horrible for usability/accessibility. Please don't do that.

Consider an approach like SO's instead: keep the user on the same page, but just include an on-page notification that scripting is unavailable:

<noscript>
    <div id="noscript-warning">Stack Overflow works best with JavaScript enabled</div>
</noscript>

You can use CSS to make this big and red and appear on top of the whole of the rest of the page if you have to.

You can be more specific too. Often you need not only JavaScript, but support for certain scripting features that aren't available everywhere. For example IEMobile (pre-8) does have JavaScript, but has stunted DOM support which stops you running most modern scripts. Or you might be relying on HTML5-related interfaces that aren't everywhere yet. In that case you can sniff client-side and set the notification's visibility manually:

<head>
    <style type="text/javascript">
        #scriptwarning {
            position: absolute; z-index: 9;
            top: 25%; left: 25%; width:50%; height: 50%;
            color: red; background: white;
            border: dashed red 1px;
        }
        body.jsok #scriptwarning { display: none; }
    </style>
</head><body>
    <script type="text/javascript">
        // Sniff capabilities in whatever way is necessary
        //
        if ('featureWeWantToUse' in window) {
            document.body.className= 'jsok';
        }
    </script>
    <div id="scriptwarning">
        JavaScript is disabled, or too rubbish on your browser to do what we want.
        See the <a href="browsersupport.html">supported browsers</a> page for more information.
    </div>
</body>
bobince
This is probably the best answer, even though it doesn't do what the OP wants.
Matthew Flaschen
How SO show/hide the alert? i just see a div(<noscript><div id="noscript-warning"></div></noscript>) when i look at view source.
Prasad
Yeah: that's all there is. The `<noscript>` element shows the content inside it when there's no JS support. Otherwise, the `noscript-warning` content is automatically hidden.
bobince
Its really cool to show an alert box rather than redirecting. I tested in Firefox and chrome, but in IE8(I dont what may be wrong), its not showing the alert box. Any clue?
Prasad
@Prasad: It's showing it just fine in my IE8 - are you sure you turned javascript off completely?
Andy E
Yes. I did "Active scripting - Disable" in Security settings. But when i checked SO, it shows the alert. And i copied the source from SO as updated in my question, it doesn't shows up. My IE Version is "8.0.6001.18882"
Prasad
Works for me too. Do bear in mind that IE uses different security settings based on where you're getting the page from; turning JavaScript off in the Internet Zone won't affect pages loaded from the local filesystem.
bobince
A: 

It's very easy to turn this on its head.

Start on the page that is there for people who don't have JavaScript, then use JavaScript to redirect to the version that requires JavaScript.

<script type="text/javascript">
    document.location = "JSVersion.html";
</script>
Sohnee