如何在Flutter WebView中获取JavaScript console.log输出内容

核心思路是通过JS桥接通信，不要尝试读取系统控制台日志——Android端读log需要额外权限，iOS端完全不支持该方案，跨端兼容性差。

1. 修改网页端（PHP嵌入JS）代码 #

首先重写页面内的console.log方法：保留原有控制台输出能力的同时，通过自定义协议的跳转请求把日志内容传递给Flutter端。你原代码尾部多写了一个重复的</body>标签，记得一并删除。

修改后完整代码：

<?php 
$MyPHPStringVar = "My name";
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
<script type="text/javascript">
    // 缓存原生console.log方法，避免破坏原有日志输出逻辑
    const nativeConsoleLog = console.log;
    console.log = function(...args) {
        // 执行原有日志输出，不影响你在Chromium系统日志中查看内容
        nativeConsoleLog.apply(console, args);
        // 对传递内容做URL编码，避免特殊字符、长内容导致解析异常
        const transmitContent = encodeURIComponent(args.join(' '));
        // 通过自定义协议发起跳转，和Flutter端约定好标识
        window.location.href = `js_bridge://console_log?msg=${transmitContent}`;
    }

    var MyJSStringVar = "<?php Print($MyPHPStringVar); ?>";
    console.log(MyJSStringVar);             
</script>
</head>
<body>
</body>
</html>

2. 修改Flutter端WebView配置 #

给WebView组件增加navigationDelegate拦截逻辑，识别我们自定义的桥接请求，解析拿到console输出内容后执行对应业务逻辑，同时阻止WebView真的跳转到这个不存在的自定义地址。

修改后完整代码：

WebView(
    javascriptMode: JavascriptMode.unrestricted,
    initialUrl: "https://hobber.ae/api/webview_response_test.php",
    onWebViewCreated: (WebViewController webViewController) {
        _controller.complete(webViewController);
    },
    // 新增导航拦截逻辑
    navigationDelegate: (NavigationRequest request) {
        // 匹配约定好的console日志桥接请求
        if (request.url.startsWith('js_bridge://console_log')) {
            // 解析URL拿到传递的日志内容
            final requestUri = Uri.parse(request.url);
            final consoleMsg = requestUri.queryParameters['msg'] ?? '';
            
            // 此处即可拿到console.log的输出内容，直接写业务逻辑
            // 示例：匹配到指定内容就跳转页面
            if (consoleMsg == 'My name') {
                // 执行你的页面导航逻辑，例如Navigator跳转、状态更新等
                debugPrint('接收到JS侧console输出：$consoleMsg，触发页面跳转');
            }

            // 必须返回prevent，拦截跳转，避免WebView加载无效地址
            return NavigationDecision.prevent;
        }
        // 其余正常页面请求直接放行
        return NavigationDecision.navigate;
    },
),

补充说明 #

• 如果需要同时接收console.error、console.warn等级别的日志，按照相同逻辑重写对应console方法，更换自定义协议的path做区分即可
• 若传递的内容是结构化JSON，编码后传递，Flutter端拿到字符串后再做JSON解析即可，不要直接拼JSON字符串到URL里避免转义异常
• 该方案无额外权限依赖，Android、iOS双端均可正常运行

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