flutter_inappwebiew网页与Flutter交互无响应及报错问题求助

问题原因 #

1. 事件监听时机错误：你在按钮点击时才添加flutterInAppWebViewPlatformReady事件监听，但该事件通常在WebView初始化完成后立即触发，此时再添加监听会错过事件触发时机，导致后续callHandler代码无法执行。
2. 未做兜底判断：未提前检查window.flutter_inappwebview是否已就绪，直接调用会出现未定义错误。

解决方案 #

1. 调整网页端代码：提前监听就绪事件+兜底判断

将事件监听移到页面初始化阶段，同时增加对window.flutter_inappwebview的存在性检查，确保无论何时点击按钮都能正常调用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>
<script>
    // 提前监听WebView就绪事件，标记就绪状态
    let isFlutterWebViewReady = false;
    window.addEventListener("flutterInAppWebViewPlatformReady", function () {
        isFlutterWebViewReady = true;
        console.log("Flutter WebView ready");
    });

    function buttonClick() {
        console.log("button click");
        try {
            // 已就绪则直接调用
            if (window.flutter_inappwebview && isFlutterWebViewReady) {
                window.flutter_inappwebview.callHandler('handlerFunction', "got success message");
                console.log("success");
            } else {
                // 未就绪则监听一次就绪事件后执行调用
                window.addEventListener("flutterInAppWebViewPlatformReady", function callOnce() {
                    window.flutter_inappwebview.callHandler('handlerFunction', "got success message");
                    console.log("success");
                    // 移除监听避免重复触发
                    window.removeEventListener("flutterInAppWebViewPlatformReady", callOnce);
                }, { once: true });
            }
        } catch (error) {
            console.log(error);
        }
    }
</script>
<body>
    <button onclick="buttonClick()" type="button">Show</button>
</body>
</html>

2. Flutter端补充优化（可选）

确保addJavaScriptHandler在WebView创建时正确绑定，你当前的代码已经符合要求，可补充onLoadStop回调确认页面加载完成，进一步保障handler生效：

// 在InAppWebView的参数中添加onLoadStop回调
onLoadStop: (controller, url) async {
  debugPrint("页面加载完成: $url");
},

关键说明 #

• flutterInAppWebViewPlatformReady事件仅在WebView首次初始化时触发一次，必须提前监听才能捕获。
• 使用{ once: true }确保事件监听只执行一次，避免重复调用callHandler。
• 始终检查window.flutter_inappwebview的存在性，从根源避免未定义错误。

内容的提问来源于stack exchange，提问作者K K Muhammed Fazil