如何用Flutter in_app_webview让网页区分WebView与浏览器环境

这个需求完全可行，你可以通过in_app_webview向网页注入JavaScript逻辑，让网页能够识别当前是否运行在Flutter WebView环境中，从而针对性调整UI和功能。

实现步骤 #

1. Flutter端：注入环境判断逻辑 #

你有两种常见的注入方式，按需选择：

方式一：注入全局布尔变量（最简单直接）

直接给网页的window对象添加一个标记变量，网页JS可以直接读取：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("你的网站地址")),
  initialSettings: const InAppWebViewSettings(
    javaScriptEnabled: true, // 必须启用JavaScript
  ),
  onWebViewCreated: (controller) async {
    // 注入全局变量，标记当前为Flutter WebView环境
    await controller.evaluateJavascript(
      source: "window.isInFlutterWebView = true;"
    );
  },
)

方式二：注入返回布尔值的判断函数（符合你提到的函数式需求）

如果需要更灵活的判断逻辑，比如后续要扩展判断条件，可以注入一个函数：

onWebViewCreated: (controller) async {
  await controller.evaluateJavascript(
    source: """
      window.checkIsInFlutter = function() {
        return true;
      };
    """
  );
},

2. 网页端：根据环境调整UI和功能 #

在网页的JavaScript代码中，通过读取Flutter注入的变量或调用函数，判断当前环境并做对应修改：

示例：修改按钮颜色

document.addEventListener('DOMContentLoaded', () => {
  // 判断是否处于Flutter WebView环境
  const isFlutterEnv = window.isInFlutterWebView || (typeof window.checkIsInFlutter === 'function' && window.checkIsInFlutter());
  
  // 调整按钮样式
  const targetBtn = document.getElementById('your-button-id');
  if (isFlutterEnv) {
    targetBtn.style.backgroundColor = 'blue';
  } else {
    targetBtn.style.backgroundColor = 'red';
  }
});

扩展：功能差异化处理

除了UI样式，还可以根据环境调整功能展示：

if (isFlutterEnv) {
  // 隐藏浏览器专属功能
  document.getElementById('browser-only-feature').style.display = 'none';
  // 显示Flutter专属交互入口
  document.getElementById('flutter-only-btn').style.display = 'block';
}

关键注意事项 #

• 启用JavaScript：必须在InAppWebViewSettings中开启javaScriptEnabled: true，否则注入的JS逻辑无法生效。
• 注入时机：推荐在onWebViewCreated回调中执行注入，确保WebView初始化完成后再注入，避免网页加载时变量/函数未定义。
• CSP兼容性：如果你的网页设置了严格的内容安全策略（CSP），需要允许内联脚本。可以在网页的CSP头中添加script-src 'unsafe-inline'，或者通过in_app_webview的contentSecurityPolicy配置覆盖原有规则。

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