iOS端webview_flutter组件弹窗确认功能失效问题

核心原因 #

iOS的WKWebView（webview_flutter在iOS端的底层实现）默认不会处理JavaScript的confirm/alert对话框，需要开发者手动配置回调逻辑；而Android端的WebView默认会自动弹出系统级对话框，因此出现双端差异。

解决方案1：使用onJsConfirm回调（webview_flutter 3.0+推荐） #

直接通过WebView组件的onJsConfirm拦截JS确认请求，用Flutter原生对话框替代显示，无需修改网页代码：

WebView(
  initialUrl: "你的网页地址",
  javascriptMode: JavascriptMode.unrestricted, // 确保启用JS
  onJsConfirm: (controller, url, message, callback) async {
    // 弹出Flutter原生确认对话框
    final bool? confirmed = await showDialog(
      context: context,
      barrierDismissible: false,
      builder: (ctx) => AlertDialog(
        title: const Text("确认操作"),
        content: Text(message),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(ctx, false),
            child: const Text("取消"),
          ),
          TextButton(
            onPressed: () => Navigator.pop(ctx, true),
            child: const Text("确认"),
          ),
        ],
      ),
    );
    // 将结果返回给JS，继续执行后续逻辑
    callback(confirmed ?? false);
  },
)

解决方案2：通过JavaScriptChannel通信（兼容旧版本组件） #

如果使用的webview_flutter版本低于3.0，没有onJsConfirm回调，可以通过JS通道实现双向通信：

1. 在Flutter侧配置JavaScriptChannel：

WebView(
  initialUrl: "你的网页地址",
  javascriptMode: JavascriptMode.unrestricted,
  javascriptChannels: {
    JavaScriptChannel(
      name: "FlutterConfirm",
      onMessageReceived: (msg) async {
        // 接收网页传递的确认消息
        final bool? confirmed = await showDialog(
          context: context,
          builder: (ctx) => AlertDialog(
            title: const Text("确认操作"),
            content: Text(msg.message),
            actions: [
              TextButton(onPressed: () => Navigator.pop(ctx, false), child: const Text("取消")),
              TextButton(onPressed: () => Navigator.pop(ctx, true), child: const Text("确认")),
            ],
          ),
        );
        // 将结果返回给网页
        await controller.runJavascript("window.flutterConfirmResult(${confirmed ?? false})");
      },
    ),
  },
  onWebViewCreated: (controller) => this.controller = controller,
)

2. 修改网页中的JS代码，替换原生confirm调用：

// 封装确认函数
async function showConfirm(message) {
  return new Promise((resolve) => {
    // 定义接收结果的全局方法
    window.flutterConfirmResult = function(result) {
      resolve(result);
      delete window.flutterConfirmResult; // 避免内存泄漏
    };
    // 向Flutter发送确认请求
    window.FlutterConfirm.postMessage(message);
  });
}

// 原删除按钮逻辑修改为：
document.querySelector(".delete-btn").addEventListener("click", async () => {
  const confirmed = await showConfirm("确定要删除吗？");
  if (confirmed) {
    // 执行原删除逻辑
  }
});

额外检查项 #

• 确保javascriptMode设置为JavascriptMode.unrestricted，否则JS代码无法正常执行
• 检查网页中是否有其他JS代码拦截了confirm方法（比如某些前端框架的全局覆盖）

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