检测浏览器插件无法通过单一方法准确实现，需组合多种技术手段。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 对象需要用户的授权。
如何组合使用这些方法，提高检测准确性？
仅仅依赖一种方法来检测插件，往往是不够准确的。更好的做法是组合使用这些方法，并进行一些容错处理。
- 优先尝试实例化插件对象： 如果你知道插件暴露的 JavaScript 对象名称，优先尝试实例化它。
- 检测 MIME 类型： 如果无法实例化插件对象，尝试检测插件注册的 MIME 类型。
- 检测插件名称： 如果 MIME 类型也不可用，最后尝试检测插件名称。
- 容错处理： 考虑到各种兼容性问题和安全限制，需要进行一些容错处理，例如使用 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 标准，而不是依赖插件。
