2

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">
<html>
<head>
    <title>Stack Overflow</title>
    <link rel="stylesheet" href="http://sstatic.net/so/all.css?v=6230">
</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>
Improve this question

8 Answers 8

Reset to default
6

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

This is probably the best answer, even though it doesn't do what the OP wants.
How SO show/hide the alert? i just see a div(<noscript><div id="noscript-warning"></div></noscript>) when i look at view source.
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.
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: It's showing it just fine in my IE8 - are you sure you turned javascript off completely?
|
3

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>
Improve this answer

9 Comments

The noscript element is not allowed to contain meta elements.
@David Dorward: Yet it works in Firefox & IE... who says it's not allowed?
@Andy it works, but according to the W3C DTD it isn't allowed to place a meta-tag inside the noscript-tag
@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: The HTML specification.
|
2

Alternatively you can use the noscript tag to hide the page content and display a warning that the page requires javascript. You can do something like this :

<noscript>
  <style> 
     #id_of_content_to_hide { display:none; }
  </style>
  <p>
     This page requires javascript.
  </p>
</noscript>
Improve this answer

Comments

1

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>
Improve this answer

Comments

0

Put a meta refresh in a noscript tag.

Improve this answer

1 Comment

The noscript element is not allowed to contain meta elements.
0

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(...)%>

Improve this answer

4 Comments

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, i'm really interested why you think meta-refresh is the worst possible way to redirect
It happens after any other way you could redirect, so it is the slowest way, and it breaks the back button.
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.
0

Just going to throw this idea out there...and I am prepared for lots of down votes as this is a way to find out if my idea is a very bad idea or not :)...

  1. Create a meta refresh to "no-java.html"
  2. Have a small script that deletes the meta tag (document.querySelector("[name='this.meta.tag']").remove() sort of thing...)

If no JS allowed, the meta is fired otherwise it is deleted.

Improve this answer

Comments

-3

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.

Improve this answer

5 Comments

Why is a hacky approach any better than using a meta refresh in a noscript tag, an approach that works?
Besides the issues of requiring cookies /and/ JS, this requires two redirects.
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.
@Andy E: That isn't allowed in HTML
@MysticEarth - it is the only valid way I can think of to achieve the stated goal. I did recommend using alternative approaches.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.