如何用Dart（Flutter）检测页面是否运行在WebView而非系统浏览器

实现思路 #

Facebook的WebView会在浏览器的userAgent中携带特定标识（比如FBAN、FBAV、Facebook等关键词），部分版本还会暴露全局window.FB对象。我们可以通过JavaScript获取这些特征，再传递给Flutter代码做判断，进而显示提示弹窗。

具体实现步骤 #

1. 添加JavaScript检测逻辑 #

在Flutter项目的web/index.html文件中，插入一段用于检测环境的JS代码：

<script>
function isFacebookWebView() {
  const userAgent = navigator.userAgent.toLowerCase();
  // 匹配userAgent中的Facebook相关标识
  const hasFacebookUA = userAgent.includes('facebook') || userAgent.includes('fban') || userAgent.includes('fbav');
  // 检测是否存在Facebook全局对象
  const hasFBGlobal = typeof window.FB !== 'undefined';
  return hasFacebookUA || hasFBGlobal;
}
</script>

2. 在Flutter中调用JS并处理结果 #

借助dart:js包（Flutter Web默认支持）调用上述JS函数，判断环境后显示提示：

import 'dart:js' as js;
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool _isInFacebookWebView = false;

  @override
  void initState() {
    super.initState();
    _checkEnvironment();
  }

  void _checkEnvironment() {
    // 调用JS检测函数
    final bool result = js.context.callMethod('isFacebookWebView');
    setState(() {
      _isInFacebookWebView = result;
    });

    // 检测到Facebook WebView时弹出提示
    if (_isInFacebookWebView) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        showDialog(
          context: context,
          barrierDismissible: false,
          builder: (ctx) => AlertDialog(
            title: const Text('提示'),
            content: const Text('您正在Facebook浏览器中查看此页面，请打开Chrome/Safari运行该Web应用'),
            actions: [
              TextButton(
                onPressed: () => Navigator.pop(ctx),
                child: const Text('知道了'),
              ),
            ],
          ),
        );
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('我的Web应用')),
      body: const Center(child: Text('应用主体内容')),
    );
  }
}

3. 额外说明 #

• 不同版本的Facebook WebView可能会有userAgent差异，你可以根据实际测试结果调整JS函数中的检测关键词；
• 如果需要引导用户直接打开系统浏览器，可以尝试通过JS调用window.open(location.href, '_system')，但部分WebView可能会限制该操作，建议以提示为主。

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