Flutter_inappwebview 6.0.0实战：5个你可能不知道的高级JavaScript交互技巧

原创

于 2026-04-01 02:01:24 发布 · 284 阅读

标签

Flutter_inappwebview 6.0.0实战：5个你可能不知道的高级JavaScript交互技巧

在移动应用开发中，WebView作为连接原生与Web技术的桥梁，其重要性不言而喻。而Flutter_inappwebview作为Flutter生态中最强大的WebView插件之一，其6.0.0版本带来了诸多令人惊喜的JavaScript交互能力。本文将深入探讨那些官方文档未曾详述，却能显著提升开发效率的高级技巧。

1. 动态JS注入与执行时机控制

许多开发者习惯在onLoadStop回调中执行JavaScript代码，但这往往会导致错过关键执行时机。更专业的做法是利用onWebViewCreated和shouldOverrideUrlLoading的组合：

InAppWebView(
  onWebViewCreated: (controller) {
    _webViewController = controller;
    // 预加载基础JS函数
    controller.evaluateJavascript(source: """
      window.flutterBridge = {
        cachedData: null,
        ready: false
      };
    """);
  },
  shouldOverrideUrlLoading: (controller, navigationAction) async {
    // 在每次URL变更前执行清理逻辑
    await controller.evaluateJavascript(source: """
      if(window.flutterBridge) {
        flutterBridge.cachedData = null;
      }
    """);
    return NavigationActionPolicy.ALLOW;
  },
)

注意：Android平台需要在AndroidManifest.xml中添加android:hardwareAccelerated="true"以获得最佳JS执行性能

实际开发中，我们常遇到需要等待特定JS对象初始化的场景。下面是一个可靠的等待方案：

Future<void> _executeWhenJSReady(String jsCode) async {
  const retryInterval = Duration(milliseconds: 200);
  const timeout = Duration(seconds: 3);
  
  final stopwatch = Stopwatch()..start();
  while (stopwatch.elapsed < timeout) {
    final isReady = await _webViewController?.evaluateJavascript(
      source: "window.flutterBridge !== undefined && window.flutterBridge.ready === true"
    );
    if (isReady == 'true') {
      return await _webViewController?.evaluateJavascript(source: jsCode);
    }
    await Future.delayed(retryInterval);
  }
  throw TimeoutException('JS环境未就绪');
}