flutter_webview如何监听网页中的每一个请求

在Flutter的WebView中，如何监听网页发出的所有网络请求？我正在使用flutter_webview插件，但找不到相关方法捕获页面内的AJAX请求、资源加载等HTTP/HTTPS请求。需要实现类似WebViewClient.shouldInterceptRequest的功能，用于记录和分析页面请求。请问有什么解决方案或替代方案？

2 回复

使用 flutter_inappwebview 插件，在 onLoadResource 回调中监听每个请求。示例代码：

InAppWebView(
  onLoadResource: (resource) {
    print("URL: ${resource.url}");
  },
)

更多关于flutter_webview如何监听网页中的每一个请求的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 的 webview_flutter 插件中，可以通过 WebViewController 的 setNavigationDelegate 方法来监听网页中的每一个请求。具体步骤如下：

  1. 创建 WebViewController：在 initState 中初始化控制器。
  2. 设置 NavigationDelegate：使用 setNavigationDelegate 并实现 onNavigationRequest 回调，该回调会在每次请求时触发。
  3. 处理请求：在回调中检查请求 URL，决定是否允许加载。

示例代码：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class MyWebView extends StatefulWidget {
  @override
  _MyWebViewState createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(NavigationDelegate(
        onNavigationRequest: (NavigationRequest request) {
          // 打印或处理每一个请求的 URL
          print('请求 URL: ${request.url}');
          
          // 允许所有请求继续加载
          return NavigationDecision.navigate;
          
          // 如需阻止特定请求，可添加条件判断：
          // if (request.url.contains('blocked.com')) {
          //   return NavigationDecision.prevent;
          // }
        },
      ))
      ..loadRequest(Uri.parse('https://example.com'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('WebView 示例')),
      body: WebViewWidget(controller: _controller),
    );
  }
}

关键点说明：

  • onNavigationRequest 在每次发起请求（包括页面跳转、资源加载）时触发。
  • 返回 NavigationDecision.navigate 允许请求，返回 NavigationDecision.prevent 阻止请求。
  • 此方法适用于监听和过滤请求，但无法直接获取请求的详细头部或响应数据。

如需更深入的网络请求监控（如捕获响应内容），可能需要结合其他方法或插件，例如使用 webview_flutter 的 onPageStarted 和 onPageFinished 辅助监听页面状态。

回到顶部