如何检测flutter webview中内部html何时发生变化

我在用着webview_flutter https://pub.dev/packages/webview_flutter要从 Flutter 应用程序上的 URL 查看页面，我需要做的是检测 HTML 代码中何时发生更改，而不更改 URL。因为使用 JS 有一些数据随着时间的推移而变化，我需要检查 HTML 并在它发生变化时从中获取一些数据，而不需要使用任何

 void Function(String)? onPageStarted,
  void Function(String)? onPageFinished,
  void Function(int)? onProgress,

因为页面没有重新加载或者 URL 没有改变，除了 HTML 代码之外，一切都是一样的。 Web 视图如下所示：

WebView(
                            gestureRecognizers: <
                                Factory<OneSequenceGestureRecognizer>>{
                              Factory<VerticalDragGestureRecognizer>(
                                  () => VerticalDragGestureRecognizer()),
                              Factory<HorizontalDragGestureRecognizer>(
                                  () => HorizontalDragGestureRecognizer()),
                              Factory<ScaleGestureRecognizer>(
                                  () => ScaleGestureRecognizer()),
                            },
                            zoomEnabled: true,
                            debuggingEnabled: true,
                            initialUrl: controller.mapURL.value,
                            javascriptMode: JavascriptMode.unrestricted,
                            onWebViewCreated:
                                (WebViewController webViewController) {
                              controller.mapWebViewController =
                                  webViewController;
                            },
                          ),

这是获取 HTML 内容的方法

                              var html = await controller.mapWebViewController!
                                  .evaluateJavascript(
                                      "window.document.getElementsByTagName('html')[0].outerHTML;");
                              print(HTML);

我通过在网页中注入一些我自己的 JavaScript 并让它在页面上发生所需操作时发回一条消息来设法做到这一点。

在我的场景中，我希望在网页上显示成功警报时收到通知。我添加了一个事件监听器DOMSubtreeModified只要 HTML 文档发生更改，就会触发该事件。

首先，我在 Flutter 端创建一个 Javascript 通道。当页面加载完成后，使用runJavascript方法中，我注入了 JavaScript 片段。

现在，当该警报出现在页面上时，侦听器函数会检测到该警报并使用以下命令将消息发送回 Flutter：postMessage method.

class _MyWebViewState extends State<MyWebView> {
  final Completer<WebViewController> _controller =
      Completer<WebViewController>();

  @override
  void initState() {
    if (Platform.isAndroid) {
      WebView.platform = SurfaceAndroidWebView();
    }

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        FutureBuilder<WebViewController>(
          future: _controller.future,
          builder: (context, snapshot) {
            return WebView(
              initialUrl: widget._buildUrl(),
              javascriptMode: JavascriptMode.unrestricted,
              javascriptChannels: _createJavaScriptChannels(context),
              onWebViewCreated: (webViewController) {
                _controller.complete(webViewController);
              },
              onPageFinished: (url) {
                if (snapshot.hasData) {
                  snapshot.data!.runJavascript(js);
                }
              },
            );
          },
        ),
      ],
    );
  }

  Set<JavascriptChannel> _createJavaScriptChannels(BuildContext context) {
    return {
      JavascriptChannel(
        name: 'MobileApp',
        onMessageReceived: (message) {
            if (message.message == 'success') {
              ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text(message.message)),
            );
          }
        },
      ),
    };
  }
}

String js = '''    
document.addEventListener("DOMSubtreeModified", onDetection);

function onDetection() {
  const successAlertExists =
    document.querySelectorAll("div.alert-success").length > 0;
  if (successAlertExists) {
    MobileApp.postMessage("success");
    
    document.removeEventListener("DOMSubtreeModified", onDetection);
  }
}
''';