如何检测 webview url 何时发生变化？答案

【问题标题】：How to detect when webview url changes in flutter?如何检测 webview url 何时发生变化？
【发布时间】：2020-12-05 08:18:08
【问题描述】：

我一直在寻找 Flutter 中的 webview 插件，它可以检测 url 何时更改，但没有找到匹配项？我试图检测 url 更改的原因是因为我想在更改时将 bool 变量更改为 true，这将更改 appbar 的颜色，这可能吗？是否有任何简单/简单的示例可以实现我在找什么？提前感谢您的帮助！

【问题讨论】：

标签： flutter webview detect

【解决方案1】：

您可以使用StreamSubscription。

  StreamSubscription<String> _onStateChanged;
  final flutterWebviewPlugin = new FlutterWebviewPlugin();

      @override
      void initState() {
        super.initState();
    
        _onStateChanged =
            flutterWebviewPlugin.onUrlChanged.listen((String state) async {
          if (state.startsWith('your_url')) {
                // do whatever you want 
           }
        });
      }

【讨论】：

令人惊讶的是这对我不起作用。使用更多代码可能会遵循您的想法，但是通过简单的复制和过去，永远不会调用回调。

【解决方案2】：

您可以使用 navigationDelegate：

WebView(
    initialUrl: yourInitialUrl,
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (WebViewController webViewController) {
      _controller.complete(webViewController);
    },
    navigationDelegate: (NavigationRequest request) {
      if(request.url.startsWith(urlSearched)) {

        //You can do anything

        //Prevent that url works
        return NavigationDecision.prevent;
      }
      //Any other url works
      return NavigationDecision.navigate;
    },
  )

【讨论】：

【解决方案3】：

对于flutter webview，我使用下面的代码

 body: WebView(
          onPageFinished: (url){
            if (url.toLowerCase().contains("google.com") && url.toLowerCase().contains("status")) {
              if (url.toLowerCase().contains("notok")) {

                Fluttertoast.showToast(msg: "not successfull");
               
              } else if (url.toLowerCase().contains("ok")) {
               
                Fluttertoast.showToast(msg: "successful!");

              }
            }
          },
          javascriptMode: JavascriptMode.unrestricted,
          initialUrl: widget.paymentUrl,
        ));

【讨论】：

【解决方案4】：

在 Webview 中，您有可选的 navigationDelegate 参数

WebView(
      // initialUrl: 'https://flutter.dev',
      onWebViewCreated: (WebViewController webViewController) {
        _controller = webViewController;
        _loadHtmlFromAssets();
      },
      navigationDelegate: (NavigationRequest request) {
        setState(() {
      widget.appBarcolor = Colors.black87;
    });
        //Any other URL works
        return NavigationDecision.navigate;
      },
    );
  }

示例：

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;
  Color appBarcolor = Colors.blue;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  WebViewController? _controller;

  @override
  void initState() {
    super.initState();
    // Enable virtual display.
    if (Platform.isAndroid) WebView.platform = AndroidWebView();
  }

  void _incrementCounter() {
    _controller!.goBack();
    setState(() {
      widget.appBarcolor = Colors.blue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: widget.appBarcolor,
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: controller(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.arrow_back),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  _loadHtmlFromAssets() async {
    // String fileText = await rootBundle.loadString('assets/help.html');
    var fileText =
        "<!DOCTYPE html> <html> <head> <title>HTML, CSS and JavaScript demo</title> <style> .rotate { transform: rotate(1700deg) ; } .rotate2 { transform: rotate(90deg) ; } .bg { background: url(https://picsum.photos/2000/1000?image=1069) center/cover; height: 50vh; width: 50vh; } body { margin:0; overflow:hidden; } </style> </head> "
        "<!-- Start your code here --> <ul> <li> <a href ='http://duckduckgo.com/' /><p> duckduckgo.com</a> </li>  <li> <a href='http://www.google.com'>google.com </a> </li>    <li> <a href='http://www.yahoo.com/'> yahoo.com </a> </li></ul> </html>";
    _controller?.loadUrl(Uri.dataFromString(fileText,
            mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
        .toString());
  }

  WebView controller() {
    return WebView(
      // initialUrl: 'https://flutter.dev',
      onWebViewCreated: (WebViewController webViewController) {
        _controller = webViewController;
        _loadHtmlFromAssets();
      },
      navigationDelegate: (NavigationRequest request) {
        setState(() {
          widget.appBarcolor = Colors.black87;
        });

        //Any other url works
        return NavigationDecision.navigate;
      },
    );
  }
}

同时调试导航请求值：

【讨论】：