Flutter InAppWebView中evaluateJavascript无法正常执行问题求助

可能的原因 #

• 主文档加载完成，但页面异步资源/DOM未就绪：onLoadStop仅标记主HTML文档加载完成，页面内的异步脚本、动态渲染的DOM元素、第三方资源（如接口数据、图片）可能仍在加载中，你的JS代码依赖这些未就绪的内容，导致执行失败。
• 页面内部JS执行顺序冲突：页面自身可能有DOMContentLoaded或window.onload的回调逻辑，你的注入JS与这些内部脚本执行顺序重叠，比如你要操作的元素还未被页面自身JS创建。
• 平台内核触发时机差异：iOS和Android的WebView内核对onLoadStop的触发标准存在细微差别，部分场景下主文档加载完成后，页面状态仍未稳定。
• 业务JS依赖异步逻辑：你的_javascriptString中的代码依赖页面的异步初始化（如接口请求返回数据），但onLoadStop时这些异步操作尚未完成。

更可靠的替代方案 #

不要依赖固定延迟，而是根据页面实际就绪状态触发JS执行：

方案1：监听DOMContentLoaded事件 #

当页面DOM结构完全构建完成后执行代码，适合依赖DOM元素的场景：

onLoadStop: (InAppWebViewController controller, Uri? url) async {
  // 注入监听DOM就绪的脚本
  await controller.evaluateJavascript(source: '''
    document.addEventListener('DOMContentLoaded', function() {
      window.flutter_inappwebview.callHandler('runMyScript');
    });
  ''');
}

// 提前注册JS回调处理器
@override
void initState() {
  super.initState();
  _webViewController?.addJavaScriptHandler(
    handlerName: 'runMyScript',
    callback: (args) async {
      await _webViewController?.evaluateJavascript(source: _javascriptString!);
    },
  );
}

方案2：监听window.load事件 #

等待页面所有资源（图片、样式表、脚本）加载完成后执行，适合依赖资源加载状态的场景：

onLoadStop: (InAppWebViewController controller, Uri? url) async {
  await controller.evaluateJavascript(source: '''
    window.addEventListener('load', function() {
      window.flutter_inappwebview.callHandler('runMyScript');
    });
  ''');
}

方案3：轮询检查目标状态 #

如果需要等待特定元素或条件就绪，可加入轮询逻辑：

onLoadStop: (InAppWebViewController controller, Uri? url) async {
  final String jsCode = '''
    function waitForReady() {
      // 替换成你的就绪条件，比如检查目标元素存在
      if (document.getElementById('target-element-id')) {
        ${_javascriptString!}
      } else {
        setTimeout(waitForReady, 100); // 每100ms检查一次
      }
    }
    waitForReady();
  ''';
  await controller.evaluateJavascript(source: jsCode);
}

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