JS怎样检测浏览器插件 3种方法识别客户端插件安装情况-js教程-PHP中文网

JS怎样检测浏览器插件 3种方法识别客户端插件安装情况

裘德小鎮的故事

发布： 2025-07-01 16:04:02

原创

355人浏览过

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

JS怎样检测浏览器插件 3种方法识别客户端插件安装情况

检测浏览器插件，这事儿说起来简单，但真要做起来，会发现水还挺深的。你可能需要知道用户装没装某个插件，以便提供更好的体验，或者干脆阻止某些行为。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 插件。

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