flutter如何监听inappwebview地址变化

在Flutter中使用inappwebview时，如何监听WebView的URL地址变化？我尝试了onLoadStart和onLoadStop，但无法准确捕获页面跳转时的地址更新。请问有没有更可靠的方法或回调可以实现这个功能？需要兼容Android和iOS平台。

2 回复

使用 InAppWebViewController 的 onLoadStop 或 onUpdateVisitedHistory 事件监听地址变化。示例：

controller.onLoadStop.listen((url) {
  print('页面加载完成: $url');
});

或

controller.onUpdateVisitedHistory.listen((url) {
  print('地址变化: $url');
});

更多关于flutter如何监听inappwebview地址变化的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中监听 InAppWebView 的地址变化，可以使用 flutter_inappwebview 插件提供的 onLoadStart 和 onLoadStop 回调来跟踪 URL 变化。以下是实现步骤和示例代码：

步骤：

  1. 添加依赖：在 pubspec.yaml 中添加 flutter_inappwebview 依赖。
  2. 使用 InAppWebView 组件：在代码中配置 onLoadStart 和 onLoadStop 回调。

示例代码：

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

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  InAppWebViewController? webViewController;
  String currentUrl = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('监听 WebView 地址变化')),
      body: Column(
        children: [
          Text('当前 URL: $currentUrl'),
          Expanded(
            child: InAppWebView(
              initialUrlRequest: URLRequest(url: Uri.parse('https://example.com')),
              onWebViewCreated: (controller) {
                webViewController = controller;
              },
              onLoadStart: (controller, url) {
                setState(() {
                  currentUrl = url.toString(); // 更新 URL
                });
                print('开始加载: $url');
              },
              onLoadStop: (controller, url) {
                setState(() {
                  currentUrl = url.toString(); // 加载完成时更新 URL
                });
                print('加载完成: $url');
              },
            ),
          ),
        ],
      ),
    );
  }
}

说明：

  • onLoadStart：在开始加载新页面时触发，可获取目标 URL。
  • onLoadStop：在页面加载完成时触发，确保 URL 已更新。
  • 通过 setState 更新界面显示的当前 URL。

注意事项：

  • 确保插件版本兼容（当前推荐使用最新版本）。
  • 处理权限（如网络访问权限）。
  • 如需监听哈希变化或单页应用路由，需结合 JavaScript 注入实现。

这样即可实时监听并显示 InAppWebView 中的地址变化。

回到顶部