Flutter Web中如何监听InAppWebView的滚动事件？

问题原因 #

你遇到的onScrollChanged回调不触发的核心原因是浏览器同源策略限制：在Flutter Web环境下，InAppWebView是通过iframe加载目标网页的，只有当加载的网页和你的Flutter Web应用满足同域条件（协议、域名、端口完全一致）时，onScrollChanged才能正常触发。如果是跨域网页，这个回调会被浏览器的安全机制拦截。

解决方案 #

根据你是否能控制目标网页，提供两种可行方案：

方案1：能控制目标网页（同域或可修改网页代码） #

通过网页JS监听滚动事件，再与Flutter端通信传递滚动数据，绕过同源限制。

示例代码：

InAppWebView(
  onWebViewCreated: (controller) {
    // 注册Flutter端的JS回调处理器
    controller.addJavaScriptHandler(
      handlerName: 'scrollHandler',
      callback: (args) {
        int scrollX = args[0];
        int scrollY = args[1];
        print('滚动坐标：x=$scrollX, y=$scrollY');
        // 这里执行你需要的滚动触发操作
      },
    );

    // 注入监听滚动的JS代码到网页中
    controller.evaluateJavascript(source: '''
      window.addEventListener('scroll', () => {
        window.flutter_inappwebview.callHandler('scrollHandler', window.scrollX, window.scrollY);
      });
    ''');
  },
  key: _key,
  gestureRecognizers: gestureRecognizers,
  initialUrlRequest: viewModel.urlRequest,
)

方案2：无法控制目标网页（跨域且不能修改） #

这种情况下无法获取网页内部的精确滚动位置，只能通过监听WebView外部的拖拽手势判断用户的滚动行为：

GestureDetector(
  onVerticalDragUpdate: (dragDetails) {
    print('用户触发WebView滚动动作');
    // 执行你需要的滚动触发操作
  },
  child: InAppWebView(
    key: _key,
    gestureRecognizers: {}, // 清空手势识别器，避免与GestureDetector冲突
    initialUrlRequest: viewModel.urlRequest,
  ),
)

补充说明：什么是同域？ #

简单来说，同域指你的Flutter Web应用部署地址（比如http://localhost:5000）和加载的网页地址（比如http://localhost:5000/detail.html）满足：

• 相同协议（都是http或都是https）
• 相同域名（都是localhost或都是example.com）
• 相同端口（都是5000或都是80）

只要其中一项不同，就属于跨域，会触发浏览器的安全限制。

内容的提问来源于stack exchange，提问作者Nithyashree B L