jQuery browser and OS detection plugin

Stoimen — Thu, 16 Jul 2009 13:50:42 +0000

Browser/OS detection with jQuery

As I wrote in my recent post I simply use the PPK BrowserDetect object to find out the browser/OS of the client. Actually I’m pretty sure there’s a similar jQuery plugin based again on that code from Quirksmode.org, but however I decided to write a simple plugin for jQuery wrapping it into a closure and exporting it in the “$” object.

Demo

You can see full working example here.

Installation

You must add a link to jquery.client.js after the jquery.js file in your code:

Now there’s a $.client object containing two strings with OS and browser, they can be referenced with:

$.client.browser
$.client.os

You can append this code after you jquery.js installation. And if you’re on Firefox you simply can test with the console object:

Download

You can download the sample code from here.

jQuery OS detection

Stoimen — Sat, 04 Jul 2009 08:35:10 +0000

JavaScript libraries and OS

Particularly in that case I’m using jQuery which is enough famous, so I’m not going to introduce it, but however you can use any library, and this remains of your choice. The interesting part here is that I didn’t find a jQuery specific OS detecting plugin.

Reference to the roots: www.quirksmode.org

Well the guru PPK has the right answer, which is working with every JavaScript library … because it’s pure JavaScript itself.

Quote from http://www.quirksmode.org/js/detect.html

1. var BrowserDetect = {
2. init: function () {
3.	this.browser = this.searchString(this.
>> dataBrowser) || "An unknown browser";
4.	this.version = this.searchVersion(
>> navigator.userAgent)
5.		|| this.searchVersion(
>> navigator.appVersion)
6.		|| "an unknown version";
7.	this.OS = this.searchString(this.dataOS)
>> || "an unknown OS";
8. },
9. searchString: function (data) {
10.	for (var i=0;i < data.length;i++)	{
11.		var dataString = data[i].string;
12.		var dataProp = data[i].prop;
13.		this.versionSearchString =
>> data[i].versionSearch || data[i].identity;
14.		if (dataString) {
15.			if (dataString.indexOf(
>> data[i].subString) != -1)
16.				return data[i].identity;
17.		}
18.		else if (dataProp)
19.			return data[i].identity;
20.	}
21. },
22. searchVersion: function (dataString) {
23.	var index = dataString.indexOf(
>> this.versionSearchString);
24.	if (index == -1) return;
25.	return parseFloat(dataString.substring(
>> index+this.versionSearchString.length+1));
26. },
27. dataBrowser: [
28.	{
29.		string: navigator.userAgent,
30.		subString: "Chrome",
31.		identity: "Chrome"
32.	},
33.	{ 	string: navigator.userAgent,
34.		subString: "OmniWeb",
35.		versionSearch: "OmniWeb/",
36.		identity: "OmniWeb"
37.	},
39.	{
40.		string: navigator.vendor,
41.		subString: "Apple",
42.		identity: "Safari",
43.		versionSearch: "Version"
44.	},
45.	{
46.		prop: window.opera,
47.		identity: "Opera"
48.	},
49.	{
50.		string: navigator.vendor,
51.		subString: "iCab",
52.		identity: "iCab"
53.	},
54.	{
55.		string: navigator.vendor,
56.		subString: "KDE",
57.		identity: "Konqueror"
58.	},
59.	{
60.		string: navigator.userAgent,
61.		subString: "Firefox",
62.		identity: "Firefox"
63.	},
64.	{
65.		string: navigator.vendor,
66.		subString: "Camino",
67.		identity: "Camino"
68.	},
69.	{		// for newer Netscapes (6+)
70.		string: navigator.userAgent,
71.		subString: "Netscape",
72.		identity: "Netscape"
73.	},
74.	{
75.		string: navigator.userAgent,
76.		subString: "MSIE",
77.		identity: "Explorer",
78.		versionSearch: "MSIE"
79.	},
80.	{
81.		string: navigator.userAgent,
82.		subString: "Gecko",
83.		identity: "Mozilla",
84.		versionSearch: "rv"
85.	},
86.	{ 		// for older Netscapes (4-)
87.		string: navigator.userAgent,
88.		subString: "Mozilla",
89.		identity: "Netscape",
90.		versionSearch: "Mozilla"
91.	}
92. ],
93. dataOS : [
94.	{
95.		string: navigator.platform,
96.		subString: "Win",
97.		identity: "Windows"
98.	},
99.	{
100.		string: navigator.platform,
101.		subString: "Mac",
102.		identity: "Mac"
103.	},
104.	{
105.		   string: navigator.userAgent,
106.		   subString: "iPhone",
107.		   identity: "iPhone/iPod"
108.    },
109.	{
110.		string: navigator.platform,
111.		subString: "Linux",
112.		identity: "Linux"
113.	}
114. ]
115.
116. };
117. BrowserDetect.init();

quirksmode – stoimen's web log