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。

这是一个经典的例子。直到版本9为止，Microsoft Internet Explorer才开始支持.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>

检测浏览器问题

1 个答案:

不要那样做。