如何在 JavaScript 中检测浏览器的布局引擎？答案

【问题标题】：How to detect a browser's layout engine in JavaScript?如何在 JavaScript 中检测浏览器的布局引擎？
【发布时间】：2015-12-13 13:59:38
【问题描述】：

我想根据客户端浏览器的layout engine创建不同的行为。如何检测它是 WebKit（Chrome、Safari、Yandex、Midori）、Gecko（Firefox、K-Meleon、Netscape）、Trident (IE) 还是其他？

【问题讨论】：

@LeshaOgonkov 不同的布局引擎在某些情况下表现不同（例如：google map's InfoBubble 仅在 WebKit 中具有动画效果）。
当目标引擎的行为与您的预期不同时，您想做什么？
@LeshaOgonkov 哎哟......这是个人问题；P 但我可以使用完全不同的弹出窗口。
我认为你在引擎检测方面走错路了，最好使用特征检测
@LeshaOgonkov 通过特征检测，你的意思是确定为什么某个插件的特征在不同的布局引擎中表现不同？这将如何避免查询布局引擎？而且你不会花更多的时间来检测一个不熟悉的插件中的某个功能（最终可能在其他引擎中不起作用）吗？

标签： javascript browser detection layout-engine

【解决方案1】：

查看navigator.userAgent（只需在浏览器的控制台中输入）。可以按如下方式搜索（不区分大小写）：

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
}

将 Gecko 留作最后一个条件，因为 userAgent 属性可能包含表达式“like Gecko”，WebKit 浏览器和 IE 也是如此：

IE 的 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) 像壁虎"

navigator.appVersion 属性可能包含与navigator.userAgent 相同的信息，但在某些浏览器中它不包含：

Firefox 的 navigator.appVersion：“5.0 (Windows)”

【讨论】：