JavaScript and the User’s Environment

Feb

JavaScript and the User’s Environment

Written by Nat Dunn Posted in: JavaScript

A lot of support forms ask users what browser and operating system they’re using as this can be useful information for debugging the problem. But users sometimes do not provide accurate information. And sometimes the support tech needs additional information like whether cookies are enabled. So, I played with the idea of capturing information on the user’s environment in a hidden field of a support form as a JSON string. Here’s a script I came up with:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Navigation Info</title>
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript">
function dumpNav(type,destination) {
  try {
    switch (type) {
      case "list" :
        document.write("<ol>");
        var i,j;
        for (i in navigator) {  
          document.write("<li>");
          if (typeof navigator[i] == "object") {
            document.write(i);
            try {    
              document.write("<ol>");      
              for (j in navigator[i]) {
                try {
                  document.write("<li><label>" + i + "." + j + ": </label> <input id='" + i + "." + j + "' name='" + i + "." + j + "' value='");
                  navigator[i][j].type ? document.write(navigator[i][j].type) : navigator[i][j].name ? document.write(navigator[i][j].name) : document.write(navigator[i][j]);
                  document.write("'></li>");  
                  document.getElementById(i + "." + j).size = document.getElementById(i + "." + j).value.length
                } catch (e) {
                  //alert(e.message);  
                }
              }
              document.write("</ol>");
            } catch (e) {
              //alert(e.message);  
            }
          } else {
            document.write("<label>" + i + ": </label> <input name='" + i + "' value='" + navigator[i] + "' size='" + navigator[i].toString().length + "'>");  
          }
          document.write("</li>");
        }
        document.write("</ol>");
        break;
      case "json" :
        var navInfo={};
        var i,j;
        for (i in navigator) {
          if (typeof navigator[i] == "object" ) {
            navInfo[i]={};
            for (j in navigator[i]) {
              try {
                navInfo[i][j]=navigator[i][j].type ? navigator[i][j].type : navigator[i][j].name ? navigator[i][j].name : navigator[i][j];
              } catch(e) {
                //alert(e.message);  
              }
            }
          } else {
            navInfo[i] = navigator[i];
          }
        }
        document.getElementById("navInfo").value=JSON.stringify(navInfo);
        break;
      default :
        throw({"message":"type must be 'list' or 'json'"});  
    }
  } catch (e) {
    alert(e.message);  
  }
}
</script>
</head>
<body onload="dumpNav('json','navInfo')">
<form>
	<textarea id="navInfo" style="width:500px;height:500px">This would normally be a hidden field.</textarea>
</form>
<div id="navList"></div>
</body>
</html>

The function can either dump the navigator information as a nested ordered list (for displaying in the browser) or as a JSON string (for putting in a hidden field). In the example above, I use a textarea instead of a hidden field just for testing.

The script throws an Object Not Supported error in IE6, but works in IE9. I’m not sure about IE7 and IE8 because my IETester seems to be freaking out.

Anyone know of a script out there that does something similar or of a better approach of getting a general dump of the user’s environment?

No TweetBacks yet. (Be the first to Tweet this post)