如何判断React应用是在网页还是iOS WebView环境中运行？

方法一：检测User Agent（UA）字符串 #

iOS的WebView（UIWebView、WKWebView）的UA字符串有可识别特征，你可以解析navigator.userAgent来判断：

• UIWebView的UA包含iPhone/iPad和AppleWebKit，但**不包含Safari**字段；
• WKWebView在iOS 13+版本的UA会带有WKWebView标识，低版本则和Safari UA高度相似，这种情况建议让iOS开发给WebView的UA添加自定义标识（比如MyAppWebView），方便前端精准识别。

React中可封装工具函数：

const isIOSWebView = () => {
  const userAgent = navigator.userAgent.toLowerCase();
  const isIOS = /iphone|ipad|ipod/.test(userAgent);
  if (!isIOS) return false;
  
  // 区分Safari和WebView：Safari UA含"safari"，UIWebView不含
  const isSafari = /safari/.test(userAgent) && !/chrome/.test(userAgent);
  // 检测iOS端配置的自定义WebView标识
  const hasCustomFlag = /myappwebview/.test(userAgent);
  
  return hasCustomFlag || (isIOS && !isSafari);
};

组件内使用示例：

import { useEffect, useState } from 'react';

function App() {
  const [isInWebView, setIsInWebView] = useState(false);

  useEffect(() => {
    setIsInWebView(isIOSWebView());
  }, []);

  return (
    <div>
      {isInWebView ? (
        <button onClick={() => window.webkit.messageHandlers.appAction.postMessage('trigger')}>
          调用iOS专属功能
        </button>
      ) : (
        <p>当前处于网页环境</p>
      )}
    </div>
  );
}

优点：无需iOS端额外开发（自定义UA场景除外）；缺点：UA可能被篡改，低版本WKWebView和Safari难以区分。

方法二：通过iOS端注入全局变量（最可靠） #

让iOS开发在WebView初始化时，向JS上下文注入一个全局变量（比如window.isInIOSWebView），前端直接判断该变量是否存在即可，这是最精准的方式。

iOS端Swift示例（WKWebView）：

let userContentController = WKUserContentController()
// 注入全局标识变量
let injectScript = WKUserScript(
  source: "window.isInIOSWebView = true;",
  injectionTime: .atDocumentStart,
  forMainFrameOnly: true
)
userContentController.addUserScript(injectScript)

let webConfig = WKWebViewConfiguration()
webConfig.userContentController = userContentController

let webView = WKWebView(frame: .zero, configuration: webConfig)

React中直接使用：

import { useEffect, useState } from 'react';

function App() {
  const [isInWebView, setIsInWebView] = useState(false);

  useEffect(() => {
    setIsInWebView(!!window.isInIOSWebView);
  }, []);

  return (
    <div>
      {isInWebView ? (
        <div>
          <h3>iOS应用专属内容</h3>
          <button onClick={() => window.callNativeModal()}>打开原生弹窗</button>
        </div>
      ) : (
        <p>网页版展示内容</p>
      )}
    </div>
  );
}

优点：完全可靠，不受UA变化影响；缺点：需要iOS端配合开发。

方法三：检测WebKit特定API #

WKWebView支持window.webkit.messageHandlers对象用于和原生通信，可通过检测该对象辅助判断：

const isIOSWKWebView = () => {
  return /iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase()) && !!window.webkit?.messageHandlers;
};

注意：仅适用于WKWebView，UIWebView不支持该API；若iOS端未配置消息处理器，messageHandlers可能为空，建议和其他方法结合使用。

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