手把手教你用JS检测浏览器插件，3种方法轻松判断是否已安装

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《JS检测浏览器插件？手把手教你3种方法判断插件是否安装》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

检测浏览器插件无法通过单一方法准确实现，需组合多种技术手段。1. navigator.plugins 属性可枚举插件列表但兼容性和安全性差；2. navigator.mimeTypes 检测插件注册的 MIME 类型更可靠但依赖插件规范性；3. 实例化插件暴露的 JavaScript 对象最准确但受限于安全机制和对象名称未知的问题；4. 综合使用上述三种方法并加入容错处理能提升准确性；5. 检测结果仍可能受浏览器兼容性、用户配置、插件更新等因素影响而不准确；6. 可借助第三方库、服务器端检测或转向 Web 标准替代插件检测；7. 随着 HTML5 和 Web API 的发展，插件依赖减少，推荐优先采用标准方案实现功能。

检测浏览器插件，这事儿说起来简单，但真要做起来，会发现水还挺深的。你可能需要知道用户装没装某个插件，以便提供更好的体验，或者干脆阻止某些行为。JS 提供了几种方法，各有优缺点，下面就来聊聊。

navigator.plugins、navigator.mimeTypes、以及尝试实例化插件对象，这三种方法各有侧重，组合使用能更准确地判断插件是否存在。

navigator.plugins 属性靠谱吗？

navigator.plugins 属性是早期检测插件的主要方式。它返回一个 PluginArray 对象，包含了浏览器安装的所有插件的信息。

优点：

• 简单易用，直接访问 navigator.plugins 即可。
• 可以枚举所有已安装的插件。

缺点：

• 兼容性问题：并非所有浏览器都支持 navigator.plugins。
• 安全性问题：某些浏览器出于安全考虑，可能会隐藏部分插件信息。
• 信息不全：只能获取插件的基本信息，无法判断插件是否可用。

示例：

function checkPlugin(pluginName) {
  if (navigator.plugins) {
    for (let i = 0; i < navigator.plugins.length; i++) {
      if (navigator.plugins[i].name.indexOf(pluginName) > -1) {
        return true;
      }
    }
  }
  return false;
}

if (checkPlugin('Flash')) {
  console.log('Flash 插件已安装');
} else {
  console.log('Flash 插件未安装');
}

这段代码看起来很直接，但实际使用中，你会发现它并不总是准确。比如，有些插件可能修改了 navigator.plugins 的内容，导致检测失效。

navigator.mimeTypes 属性能派上什么用场？

navigator.mimeTypes 属性返回一个 MimeTypeArray 对象，包含了浏览器支持的所有 MIME 类型的信息。插件通常会注册一些 MIME 类型，我们可以通过检测这些 MIME 类型来判断插件是否存在。

优点：

• 比 navigator.plugins 更可靠，因为 MIME 类型通常是插件必须注册的。

缺点：

• 需要知道插件注册的 MIME 类型，这需要查阅插件的文档。
• 某些插件可能没有注册 MIME 类型。

示例：

function checkMimeType(mimeType) {
  if (navigator.mimeTypes) {
    for (let i = 0; i < navigator.mimeTypes.length; i++) {
      if (navigator.mimeTypes[i].type === mimeType) {
        return true;
      }
    }
  }
  return false;
}

if (checkMimeType('application/x-shockwave-flash')) {
  console.log('Flash 插件已安装');
} else {
  console.log('Flash 插件未安装');
}

这种方法比直接检测插件名称更可靠，但仍然需要依赖插件的规范性。如果插件没有正确注册 MIME 类型，或者用户修改了 MIME 类型的配置，检测结果仍然可能不准确。

尝试实例化插件对象是更好的方法吗？

某些插件会暴露一些 JavaScript 对象，我们可以尝试实例化这些对象来判断插件是否存在。

优点：

• 最可靠的方法，因为只有插件真正安装并启用，才能成功实例化对象。

缺点：

• 需要知道插件暴露的 JavaScript 对象名称。
• 某些插件可能没有暴露 JavaScript 对象。
• 可能会触发浏览器的安全警告。

示例：

function checkActiveX(name) {
  try {
    new ActiveXObject(name);
    return true;
  } catch (e) {
    return false;
  }
}

if (checkActiveX('ShockwaveFlash.ShockwaveFlash')) {
  console.log('Flash 插件已安装');
} else {
  console.log('Flash 插件未安装');
}

这种方法通常用于检测 ActiveX 插件，例如 Flash。但需要注意的是，这种方法可能会触发浏览器的安全警告，因为实例化 ActiveX 对象需要用户的授权。

如何组合使用这些方法，提高检测准确性？

仅仅依赖一种方法来检测插件，往往是不够准确的。更好的做法是组合使用这些方法，并进行一些容错处理。

1. 优先尝试实例化插件对象： 如果你知道插件暴露的 JavaScript 对象名称，优先尝试实例化它。
2. 检测 MIME 类型： 如果无法实例化插件对象，尝试检测插件注册的 MIME 类型。
3. 检测插件名称： 如果 MIME 类型也不可用，最后尝试检测插件名称。
4. 容错处理： 考虑到各种兼容性问题和安全限制，需要进行一些容错处理，例如使用 try-catch 语句捕获异常。

示例：

function checkPlugin(pluginName, mimeType, activeXName) {
  try {
    if (activeXName && new ActiveXObject(activeXName)) {
      return true;
    }
  } catch (e) {}

  if (mimeType && navigator.mimeTypes && navigator.mimeTypes[mimeType]) {
    return true;
  }

  if (navigator.plugins) {
    for (let i = 0; i < navigator.plugins.length; i++) {
      if (navigator.plugins[i].name.indexOf(pluginName) > -1) {
        return true;
      }
    }
  }

  return false;
}

if (checkPlugin('Flash', 'application/x-shockwave-flash', 'ShockwaveFlash.ShockwaveFlash')) {
  console.log('Flash 插件已安装');
} else {
  console.log('Flash 插件未安装');
}

这段代码综合使用了三种方法，并进行了容错处理，可以提高检测的准确性。

为什么检测结果不总是准确的？

浏览器插件检测是一个复杂的问题，受到多种因素的影响。

• 浏览器兼容性： 不同的浏览器对插件的支持程度不同，有些浏览器可能隐藏了插件信息，或者禁用了某些插件。
• 安全限制： 出于安全考虑，浏览器可能会限制 JavaScript 访问插件的信息，或者阻止 JavaScript 实例化某些插件对象。
• 用户配置： 用户可以手动禁用插件，或者修改插件的配置，导致检测结果不准确。
• 插件更新： 插件更新可能会改变插件的名称、MIME 类型或 JavaScript 对象名称，导致检测失效。

因此，即使使用了多种方法，并进行了容错处理，仍然无法保证检测结果的绝对准确。

除了这三种方法，还有其他选择吗？

除了 navigator.plugins、navigator.mimeTypes 和尝试实例化插件对象之外，还有一些其他的选择。

• 使用第三方库： 有一些第三方库提供了更高级的插件检测功能，例如 Modernizr 和 jQuery.browser。这些库通常会封装各种浏览器的兼容性问题，并提供更易用的 API。
• 使用服务器端检测： 可以通过服务器端脚本来检测浏览器插件，例如通过 User-Agent 字符串来判断。这种方法可以绕过浏览器的安全限制，但需要依赖服务器端的支持。
• 放弃插件检测： 在某些情况下，最好的选择可能是放弃插件检测，转而使用其他的技术方案。例如，如果需要播放视频，可以使用 HTML5 video 标签，而不是依赖 Flash 插件。

选择哪种方法，取决于具体的应用场景和需求。

插件检测的未来趋势是什么？

随着 HTML5 和 Web API 的发展，浏览器对插件的依赖越来越少。许多传统上需要插件才能实现的功能，现在都可以通过 Web 标准来实现。

例如，HTML5 video 标签可以播放视频，Web Audio API 可以处理音频，WebGL 可以进行 3D 渲染。这些 Web 标准不仅功能更强大，而且更安全、更易用。

因此，插件检测的未来趋势是逐渐被 Web 标准所取代。在开发 Web 应用时，应该尽可能使用 Web 标准，而不是依赖插件。

到这里，我们也就讲完了《手把手教你用JS检测浏览器插件，3种方法轻松判断是否已安装》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于浏览器插件,JS检测的知识点！