Features and UA detection in JS

This time I will bring you features and UA detection in JS. What are the precautions for features and UA detection in JS? The following is a practical case, let’s take a look.

The earliest browser sniffing is user agent (user-agent) detection. The server (and later client) determines the type of browser based on user-agent

string. During this period, the server will completely block certain browsers from viewing website content based on the user-agent string. The browser that has benefited the most is Netscape Browser. It is undeniable that Netscape (at the time) was the most powerful browser, so much so that many websites believed that only Netscape browser would display their web pages properly. The user-agent string for Netscape Browser is Mozilla/2.0 (Win95; I). When IE was first released, it was basically forced to use a large portion of the Netscape browser user-agent string to ensure that the server could serve the new browser. Because most user agent detection processes look for the "Mozilla" string and the version number after the slash, the user-agent string of IE browser is set to Mozilla/2.0 (compatible; MSIE 3.0; Windows 95), don’t you think it’s a thief? IE uses such a user agent string, which means that every browser type check will also identify the new browser as Netscape's Navigator browser. This also makes it a trend for new browsers to partially copy the user agent string of existing browsers. The Chrome distribution's user-agent string contains part of Safari's user-agent string, which in turn contains part of Firefox's user-agent string, which in turn contains part of Netscape's user-agent string.

Detection based on UA ​​is extremely unreliable and difficult to maintain. UA can be forged. A browser declared as Chrome may be other browsers

Every time there is a new browser appears, or the existing browser version is upgraded, the original code based on UA ​​detection must be updated, and the maintenance cost and error probability are extremely high

So I recommend that you avoid detecting UA as much as possible, even if you have to do so in the case of.

2.8.2 Feature Detection

We hope to have a smarter method (detection) based on browser conditions, so a technology called feature detection becomes popular. The principle of feature detection is to test for a specific browser feature and apply feature detection only when the feature is present, for example:

// 不好的写法if (navigator.userAgent.indexOf("MSIE 7") > -1) { }// 好的写法if (
document
.getElementById) {}

Because feature detection does not depend on the browser used, but only on feature exists, so it does not necessarily require new browser support. For example, in the early days of DOM, not all browsers supported document.getElementById(), so the code to get an element based on ID seemed redundant.

// 好的写法// 仅为举例说明特性检测，现代浏览器都支持getElementByIdfunction getById (id) {  var el = null;  if (document.getElementById) { // DOM
    el = document.getElementById(id);
  } else if (document.all) { // IE
    el = document.all[id];
  } else if (document.layers) { // Netscape <= 4
    el = document.layers[id];
  }  return el;
}

This method is also suitable for detecting the latest browser features today. Browsers have experimentally implemented these latest features, and the specifications are still being finalized. A common Polyfill is an application for feature detection, for example:

if (!Array.isArray) {  Array.isArray = function (arr) {    return 
Object
.prototype.toString.call(arr) === '[object Array]'
  }
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website

Other related articles!

Recommended reading:

How to avoid null comparison in web development

Loose coupling of the UI layer in web development

The above is the detailed content of Features and UA detection in JS. For more information, please follow other related articles on the PHP Chinese website!