在前端开发中，我们经常需要根据不同浏览器的特性来编写代码。而浏览器本身并没有提供一个方便的方式来获取浏览器及其版本信息，因此我们需要使用 JavaScript 来实现这一功能。
判断浏览器类型
首先，我们可以通过 navigator.userAgent 属性获取浏览器的 User Agent 字符串，然后根据其中的关键字来判断浏览器类型。以下是一些常见浏览器的 User Agent 关键字：
- Chrome：
Chrome - Firefox：
Firefox - Safari：
Safari - Edge：
Edg - Internet Explorer 11：
Trident/7.0; rv:11.0
示例代码如下：
-- -------------------- ---- -------
-------- ---------------- -
----- --------- - --------------------
-- ------------------------------ -
------ ---------
- ---- -- ------------------------------- -
------ ----------
- ---- -- ------------------------------ -
------ ---------
- ---- -- --------------------------- -
------ -------
- ---- -- --------------------------------- ---------- -
------ --------- -------- ----
-
-判断浏览器版本
除了判断浏览器类型之外，我们还需要获取浏览器的具体版本信息。这里有两种常见的方式来实现：
方式一：利用 User Agent 字符串中的版本号
在 User Agent 字符串中，浏览器版本号通常以 Version/ 或者 / 开头。我们可以通过正则表达式来提取这些信息。
示例代码如下：
-- -------------------- ---- -------
-------- -------------------------------- -
----- --------- - --------------------
--- ------- - ---
-- ----------------------------- -
------- - -------------------------------------- ------
- ---- -- ---------------------- -
------- - ------------------------------- ------
-
------ --------
-方式二：利用浏览器特有的属性
不同浏览器提供了不同的属性来获取浏览器版本信息。以下是一些常见浏览器的版本属性：
- Chrome：
window.chrome.app.version - Firefox：
window.InstallTrigger - Safari：
window.navigator.appVersion - Edge：
window.navigator.userAgent - Internet Explorer 11：无法获取具体版本信息
示例代码如下：
-- -------------------- ---- -------
-------- ------------------- -
--- ------- - ---
----- ----------- - -----------------
------ ------------- -
---- ---------
------- - ----------------------------
------
---- ----------
------- - -------------------------------
------
---- ---------
------- - --------------------------------------------------------------
------
---- -------
------- - ---------------------------------------------------------
------
---- --------- -------- ----
------- - ---
------
-
------ --------
-结语
通过上述代码，我们可以获取浏览器类型及其版本信息，从而针对不同的浏览器特性来编写前端代码。当然，由于不同浏览器的 User Agent 可能会存在差异，因此我们需要定期更新这些判断逻辑，以确保其准确性。
在实际开发中，如果我们只关心某些浏览器的特性，而不需要判断具体浏览器版本，那么可以直接使用浏览器提供的特有属性来判断。这样可以避免一些浏览器版本号兼容性问题，并且使代码更加简洁易懂。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/929