1

I want to create different behaviors according to the layout engine of the client's browser. How to detect if it's WebKit (Chrome, Safari, Yandex, Midori), Gecko (Firefox, K-Meleon, Netscape), Trident (IE), or others?

cweiske
  • 30,033
  • 14
  • 133
  • 194
Armfoot
  • 4,663
  • 5
  • 45
  • 60
  • @LeshaOgonkov Different layout engines behave differently in some situations (e.g.: [google map's InfoBubble](http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/) is only animated in WebKit). – Armfoot Sep 17 '15 at 09:55
  • What you want to do when aimed engine become act differently from your expectations? – Lesha Ogonkov Sep 18 '15 at 12:15
  • @LeshaOgonkov ouch... that's a personal question ;P But I could use an entirely different pop-up instead. – Armfoot Sep 18 '15 at 12:31
  • I think you on a wrong way with engine detection, better use feature detection – Lesha Ogonkov Sep 18 '15 at 13:08
  • 1
    @LeshaOgonkov by feature detection, do you mean identifying why a certain plugin's feature behaves differently in different layout engines? How would that avoid querying for the layout engine? And wouldn't you take much more time detecting a certain feature in an unfamiliar plugin (which in the end may not work in other engines)? – Armfoot Sep 18 '15 at 14:51
  • By feature detection i mean detection of certain features you actually need to implement your task (animation support, for example). – Lesha Ogonkov Sep 19 '15 at 14:26

1 Answers1

0

Look into navigator.userAgent (just type it in your browser's console). You can search as follows (case insensitive):

if(navigator.userAgent.search(/trident/i)>0){
    //Internet Explorer
} else if(navigator.userAgent.search(/webkit/i)>0){
    //Chrome, Safari
} else if(navigator.userAgent.search(/???/i)>0){ //replace ??? by the appropriate engine
    //others
} else if(navigator.userAgent.search(/gecko/i)>0){
    //Firefox
}

Leave Gecko for the last condition since the userAgent property may contain the expression "like Gecko", WebKit browsers do and IE as well:

IE's navigator.userAgent: "Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; InfoPath.3; rv:11.0) like Gecko"

The navigator.appVersion property may contain the same information as navigator.userAgent but in some browsers it doesn't:

Firefox's navigator.appVersion: "5.0 (Windows)"

Armfoot
  • 4,663
  • 5
  • 45
  • 60