Thursday, October 11, 2012

Identifying browsers with JavaScript disabled

In this day and age, a user without JavaScript enabled is going to have an awful time on the web and, quite frankly, “graceful degradation” and similar no-JavaScript fallbacks are a waste of time. That being said, sometimes it’s still important to be able to identify visitors who choose to navigate your website without any JavaScript.

Active Approach

A common technique for detecting whether a user has JavaScript enabled is to use JavaScript to set a form value and then check that value on the server after submission. While this is a valid approach, it’s not always ideal because it requires that some kind of interaction takes place on the client.

<script type="text/javascript" src=""></script>
<script type="text/javascript">
    $(function() {

    <input type="hidden" id="jsEnabled" name="jsEnabled" value="false" />
    <input type="submit" />

Passive Approach

Another technique, and the one we use at, is to leverage the <noscript /> tag. <noscript /> identifies any block of code which should be rendered when JavaScript is not enabled and it is supported by all major browsers. By placing a request to an image resource on our server in a <noscript /> block we can infer that any a request made to that resource is with a browser with JavaScript disabled. The best part about this approach is that it requires no action by the user; the browser does all of the work.

    <img src="__nojs.gif" width="1" height="1" style="display: none" />

No comments: