Detecting Browsers in JavaScript

JavaScript browser detection: a simple and effective solution

In the development of web pages, detecting the user's browser type is very helpful for processing the browser's specific bug, application compatibility repair or optimization performance. Although modern development advocates characteristic detection rather than browser detection, it is still practical to understand the browser used by users. This article will explore a simple and effective JavaScript method, using

attributes to detect different browsers. navigator.userAgent

Understand the useragent string

The attribute provides detailed information about user browsers, operating systems and rendering engines. Each browser has a unique UserAgent mode and can be used for identification.

window.navigator.userAgent For example:

From this we can extract useful information. For example, users use Chrome, Safari or other browsers.

<code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36</code>

Detecting different browsers

The following is a simple way to use JavaScript to detect browsers:

Code detailed explanation

<code class="language-javascript">const userAgent = window.navigator.userAgent;
const isEdge = /Edge/.test(userAgent); // 检测Microsoft Edge
const isChrome = /chrome/i.test(userAgent) && !isEdge; // 检测Chrome，排除Edge
const isSafari = /safari/i.test(userAgent) && !isEdge; // 检测Safari，排除Edge
const isMobile = /mobile/i.test(userAgent); // 检测移动设备
const isIEWin7 = /Windows NT 6.1/i.test(userAgent) && /rv:11/i.test(userAgent); // 检测Windows 7上的Internet Explorer 11
const isOldSafari = isSafari && (/Version\/8/i.test(userAgent) || /Version\/9/i.test(userAgent)); // 检测旧版Safari

const isEnabledForBrowser = (isChrome || isSafari || isIEWin7) && !isMobile;</code>

detect Microsoft Edge:

1. Useragent strings of the Edge browser contain "EDGE".

detect Google Chrome:

<code class="language-javascript">const isEdge = /Edge/.test(userAgent);</code>

2. Because Edge also contains "chrome", we exclude it outside the test.
Detect Safari:

<code class="language-javascript">const isChrome = /chrome/i.test(userAgent) && !isEdge;</code>

The reason why this is effective is because Safari's USARAGENT string contains "Safari", but we exclude EDGE to avoid misjudgment.
3. Detecting mobile devices:

<code class="language-javascript">const isSafari = /safari/i.test(userAgent) && !isEdge;</code>

Mobile browser usually contains "Mobile" in its USARAGENT.

4. detect the Internet Explorer on Windows 7:

<code class="language-javascript">const isMobile = /mobile/i.test(userAgent);</code>

The USRAGENT of Windows 7 contains "Windows NT 6.1", and IE 11 contains "RV: 11".

5. Detecting the old version of Safari:

<code class="language-javascript">const isIEWin7 = /Windows NT 6.1/i.test(userAgent) && /rv:11/i.test(userAgent);</code>

Useragent of the old version of Safari contains "Version/8" or "Version/9".

The enable function of the specific browser:

This ensures that this function is only enabled on IE on Chrome, Safari or Windows 7 without being used on mobile devices.

<code class="language-javascript">const isOldSafari = isSafari && (/Version\/8/i.test(userAgent) || /Version\/9/i.test(userAgent));</code>

Full code example

7. Conclusion Useragent for browser detection is very useful when the characteristic detection is insufficient. However, it is best to use gradual enhancement and elegance to ensure that your web application can run normally in all browsers. Through this method, you can implement a specific solution or optimization of the browser while maintaining the flexibility of the web application. Have you encountered the problem of browser compatibility in the project? Welcome to share your thoughts in the comments!

The above is the detailed content of Detecting Browsers in JavaScript. For more information, please follow other related articles on the PHP Chinese website!