Difference between revisions of "How to determine browser capabilities"
From Joomla! Documentation
(Marked this version for translation) |
(Some markup and phrasing changes.) |
||
Line 2: | Line 2: | ||
<translate> | <translate> | ||
<!--T:1--> | <!--T:1--> | ||
− | + | Web browsers sometimes differ in the way they render a page. For this reason you may wish to find out which particular browser a visitor is using in order to use some browser-specific CSS. | |
</translate> | </translate> | ||
<translate> | <translate> | ||
<!--T:2--> | <!--T:2--> | ||
− | The following JavaScript defines a simple browser detection object | + | The following JavaScript defines a simple browser detection object that determines the browser's name and version by decoding the ''navigator.userAgent'' string. |
</translate> | </translate> | ||
− | < | + | <syntaxhighlight lang="javascript"> |
function browserDetect() | function browserDetect() | ||
{ | { | ||
Line 32: | Line 32: | ||
} | } | ||
} | } | ||
− | </ | + | </syntaxhighlight> |
<translate> | <translate> | ||
<!--T:3--> | <!--T:3--> | ||
− | + | To use this in a script, you create an instance of this object: | |
</translate> | </translate> | ||
− | < | + | <syntaxhighlight lang="javascript"> |
var browser = new browserDetect(); | var browser = new browserDetect(); | ||
− | </ | + | </syntaxhighlight> |
<translate> | <translate> | ||
<!--T:4--> | <!--T:4--> | ||
− | The property | + | The property ''browser.name'' will then give you the name of the browser (MSIE, Opera, Netscape or Firefox), ''browser.mainVersion'' will show the main version number and ''browser.minorVersion'' contains the minor version number. |
</translate> | </translate> | ||
<translate> | <translate> | ||
<!--T:5--> | <!--T:5--> | ||
− | + | This is not foolproof. It is much better to avoid writing browser-specific code. | |
</translate> | </translate> | ||
Latest revision as of 10:55, 24 November 2022
Web browsers sometimes differ in the way they render a page. For this reason you may wish to find out which particular browser a visitor is using in order to use some browser-specific CSS.
The following JavaScript defines a simple browser detection object that determines the browser's name and version by decoding the navigator.userAgent string.
function browserDetect()
{
var browserNames=new Array("Opera", "MSIE","Netscape","Firefox");
this.name="NK";
this.mainVersion="NK";
this.minorVersion="NK";
for (var i=0; i< browserNames.length; i++)
{
var pattern='('+browserNames[i]+')'+'.([0-9]+)\.([0-9]+)';
var myRegExp=new RegExp(pattern);
if (myRegExp.test(navigator.userAgent))
{
var results=myRegExp.exec(navigator.userAgent);
this.name=results[1];
this.mainVersion=results[2];
this.minorVersion=results[3];
break;
}
}
}
To use this in a script, you create an instance of this object:
var browser = new browserDetect();
The property browser.name will then give you the name of the browser (MSIE, Opera, Netscape or Firefox), browser.mainVersion will show the main version number and browser.minorVersion contains the minor version number.
This is not foolproof. It is much better to avoid writing browser-specific code.