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="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('#jsEnabled').val('true');
    });
</script>

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

Passive Approach

Another technique, and the one we use at ScoreBig.com, 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.

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

1 comment:

sarabjeet said...
This comment has been removed by a blog administrator.