Блог

Я пытаюсь определить браузер, который используется приложением. Это код, который я выполняю.

 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; Планшетный ПК 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; Планшетный ПК 2.0; wbx 1.0.0; rv: 11.0) как Геккон

Первый для меня выглядит нормально, поскольку он выдает MSIE search как 25. В этом случае я могу предположить, что пользователь использует IE. Но во втором написано Mozilla / 5.0, а поиск ‘MSIE’ выдает -1, хотя я пытаюсь в IE. Я не уверен, в чем реальная проблема с моим кодом. Любой, пожалуйста, помогите мне решить это.

Я пытаюсь определить браузер, который используется приложением.

Не делайте этого.

Как вы можете видеть, использование navigator.userAgent — ненадежный способ узнать, какой браузер у кого-то есть, и он также может быть легко подделан клиентом.

Вместо этого спросите себя, «почему» вы действительно хотите знать, какой браузер у кого-то есть, и сделайте «обнаружение функций», а не «обнаружение браузера».

Обнаружение функций — это то, где мы проверяем, поддерживает ли клиент какую-либо функциональность, которую мы хотели бы использовать. Поскольку есть клиенты, у которых есть проприетарные API, знание того, можете ли вы вызвать конкретный API, — это действительно то, что вы хотите знать.

Вот классический пример. Microsoft Internet Explorer не начинал поддерживать стандарт W3C DOM .addEventListener() до версии 9. Раньше, когда IE8 все еще использовался довольно часто, нам нужно было знать, следует ли нам использовать новый стандарт или старый проприетарный API .attachEvent . Вот что мы сделали:

 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>