iOS下webkit.messageHandlers存在场景疑惑，求优雅检测iOS WebView方法

为什么iOS第三方浏览器（Chrome/Firefox）中也存在webkit.messageHandlers？ #

iOS系统对第三方浏览器有内核限制，所有上架App Store的第三方浏览器必须使用苹果提供的WebKit内核实现，因此这些浏览器的JS环境中会默认存在window.webkit对象，其中也包含messageHandlers属性。但这个messageHandlers是浏览器自身的空实现，不具备原生App WebView中与原生代码交互的能力，alert输出时只能看到模糊的"value"，是因为它是被封装的内部空结构，没有可枚举的具体属性。

更优雅的iOS WebView检测方法 #

单纯检测webkit.messageHandlers无法区分原生WebView和第三方浏览器，需要结合User-Agent、浏览器特征等多维度判断，以下是优化后的检测代码：

const isIOSWebView = () => {
  const userAgent = window.navigator.userAgent;
  const vendor = window.navigator.vendor;
  
  // 确认是iOS设备
  const isIOSDevice = /iPhone|iPad|iPod/.test(userAgent);
  if (!isIOSDevice) return false;
  
  // 排除Safari浏览器
  const isSafariBrowser = /Safari/.test(userAgent) && !/CriOS|FxiOS/.test(userAgent);
  if (isSafariBrowser) return false;
  
  // 排除Chrome、Firefox等第三方浏览器
  const isThirdPartyBrowser = /CriOS|FxiOS/.test(userAgent);
  if (isThirdPartyBrowser) return false;
  
  // 结合WebKit环境和厂商标识确认原生WebView
  return typeof window.webkit !== 'undefined' && vendor === 'Apple Computer, Inc.';
};

代码说明： #

• 先通过User-Agent过滤非iOS场景
• 排除Safari浏览器：通过User-Agent中的Safari标识和第三方浏览器专属标识（CriOS为Chrome iOS、FxiOS为Firefox iOS）区分
• 直接排除第三方浏览器，它们的WebKit环境并非原生App提供的WebView
• 最后结合window.webkit存在性和厂商标识，确保是原生App的WebView环境

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