如何用JavaScript实现浏览器检测并在HTML中显示当前浏览器名称？

嘿，作为JavaScript新手，你这个需求其实很好搞定～咱们直接基于你现有的鸭子类型检测代码来改造就行，思路超简单：先根据那些布尔值（isFirefox、isChrome这类）判断出当前浏览器的具体名称，再把它加到页面输出里。

具体修改步骤： #

1. 添加浏览器名称判断逻辑：先定义一个变量存储浏览器名称，然后通过条件判断匹配对应的浏览器类型
2. 修改输出内容：把判断好的浏览器名称添加到输出文本中，让它醒目地显示在页面上

修改后的完整代码： #

// 先根据鸭子类型检测结果判断当前浏览器名称
let browserName = "未知浏览器";

// 注意判断顺序：优先检测具体浏览器，再检测内核（比如Blink）
if (isFirefox) {
  browserName = "Firefox";
} else if (isChrome) {
  browserName = "Chrome";
} else if (isSafari) {
  browserName = "Safari";
} else if (isOpera) {
  browserName = "Opera";
} else if (isIE) {
  browserName = "Internet Explorer";
} else if (isEdge) {
  browserName = "Edge";
} else if (isBlink) {
  browserName = "Blink内核浏览器";
}

// 构建页面输出内容
var output = 'Detecting browsers by ducktyping:<hr>';
// 新增当前浏览器名称的显示行（用星号强调）
output += '*当前使用浏览器:* ' + browserName + '<br><br>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isEdge: ' + isEdge + '<br>';
output += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;

小提示： #

• 为什么要按这个顺序判断？因为像Chrome、Edge这类现在都用Blink内核，如果先判断isBlink，就会把它们识别成Blink内核浏览器，而不是具体的Chrome/Edge了，所以具体浏览器要放在内核检测前面。
• 如果遇到一些小众浏览器，你可以继续往条件里添加对应的判断规则哦～

内容的提问来源于stack exchange，提问作者Billy