检测浏览器问题

Question

我正在尝试检测应用程序使用的浏览器。这是我正在执行的代码。

function checkBrowserType(){
var ua =navigator.userAgent;

alert("browser details ==> " +ua);

}

奇怪的是在各种屏幕上我得到不同的用户代理细节。当我在IE11中尝试一个屏幕时，它会显示出来

Mozilla / 4.0（兼容; MSIE 8.0; Windows NT 10.0; WOW64; Trident / 7.0; Touch; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5。 30729; Tablet PC 2.0; wbx 1.0.0）

Mozilla / 5.0（Windows NT 10.0; WOW64; Trident / 7.0; Touch; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; Tablet PC 2.0 ; wbx 1.0.0; rv：11.0）像Gecko

第一个看起来很好，因为它给MSIE搜索为25.在这种情况下，我可以假设用户正在使用IE。但第二个说Mozilla / 5.0和'MSIE'搜索给-1，虽然我在IE中尝试。我不确定我的代码真正的问题是什么。任何人请帮我解决这个问题。

Answer 1

我正在尝试检测应用程序使用的浏览器。

不要那样做。

正如您所看到的那样，使用navigator.userAgent是一种不可靠的方法，可以找出某人拥有的浏览器，也很容易被客户端欺骗。

相反，问问自己“为什么”你真的想知道某人有什么浏览器并做"feature detection"，而不是“浏览器检测”。

功能检测是我们测试以查看客户端是否支持我们想要使用的某些功能的地方。由于存在具有专有API的客户端，因此了解您是否可以调用特定API实际上是您想知道的。

这是一个经典的例子。 Microsoft Internet Explorer在版本9之前没有开始支持.addEventListener()的W3C DOM标准。当IE8仍然被使用时，我们必须知道我们是否应该使用.attachEvent的新标准或旧的专有API。这是我们做的：

let div = document.querySelector("div"); // Get the element

// Detect whether that element supports addEventListener...
// If it does, then that object property will return a native function (something)
// If it doesn't, then that object property won't exist and we'll get `undefined` (nothing)
if(div.addEventListener){
  console.log("W3C DOM Event API Supported... Setting up event with standard API");
  div.addEventListener("click", function(){
    alert("Thanks!");
  });
} else {
  console.log("Proprietary API Supported... Setting up event with proprietary API");
  div.attachEvent("click", function(){
    alert("Get a new browser!");
  });
}

<div>Click me</div>