时间戳

首页 > 解决方案 > Flutter：如何在运行 JavaScript 函数并显示 html 后等待 WebView 完成加载？

flutter - Flutter：如何在运行 JavaScript 函数并显示 html 后等待 WebView 完成加载？

问题描述

我想从我的 headlessWebView 中获取完成加载的网站的 HTML 代码，但最初，该网站执行一些 js。

得到我想要的东西的步骤是：

  1. 打开网站，
  2. 运行 javascript 函数以在文本字段上填充一些内容并按提交，
  3. 等待网站执行js并完成加载，
  4. 将 webview 的结果作为 HTML 代码存储在字符串中。

这是我下面的代码：

     final GlobalKey webViewKey = GlobalKey();

     InAppWebViewGroupOptions options = InAppWebViewGroupOptions(
     crossPlatform: InAppWebViewOptions(
        useShouldOverrideUrlLoading: true,
        mediaPlaybackRequiresUserGesture: false,
      ),
      android: AndroidInAppWebViewOptions(
        useHybridComposition: true,
      ),
      ios: IOSInAppWebViewOptions(
        allowsInlineMediaPlayback: true,
      ));

      HeadlessInAppWebView headlessWebView;
      String htmlCode = "";

      @override
      void initState() {
      super.initState();

      headlessWebView = new HeadlessInAppWebView(
      initialUrlRequest: URLRequest(URL: 
      Uri.parse("https://example.com/")),
      initialOptions: options,
      /*InAppWebViewGroupOptions(
        crossPlatform: InAppWebViewOptions(),
      ),*/
      shouldOverrideUrlLoading: (controller, navigationAction) async {
        var uri = navigationAction.request;
        headlessWebView.webViewController.loadUrl(urlRequest: uri);
        return NavigationActionPolicy.ALLOW;
      },
      onWebViewCreated: (controller) {
        print('HeadlessInAppWebView created!');
      },
      onConsoleMessage: (controller, consoleMessage) {
        print("CONSOLE MESSAGE: " + consoleMessage.message);
      },
      onLoadStart: (controller, url) async {
        print("onLoadStart $url");
        setState(() {
          this.url = url.toString();
        });
      },
      onLoadStop: (controller, url) async {
        print("onLoadStop $url");
        String jsscript =
            "javascript:(function() { document.getElementById(\"text_feild\").value ='" +
                "sometext" +
                "';document.getElementById(\"submit\").click();})();";
        await headlessWebView.webViewController
            .evaluateJavascript(source: jsscript);

        var result = await headlessWebView.webViewController.evaluateJavascript(
            source:
                "javascript:document.getElementsByTagName('a')[5].getAttribute('href').outerHTML;");

        log(result.toString());
        htmlCode = result.toString();
    
      },
      onUpdateVisitedHistory: (controller, url, androidIsReload) {
        print("onUpdateVisitedHistory $url");
        setState(() {
          this.url = url.toString();
        });
      },
    );

我在日志中收到错误（result.toString()); 它始终为空。

标签： flutterwebviewflutter-dependenciesflutter-webflutter-inappwebview

解决方案

试试这个来获取我当前使用的字符串中的 HTML，这是我的应用程序，它工作正常。

onLoadStop:
                  (InAppWebViewController controller, String url) async {
                print("onLoadStop: " + url);
                var html = await controller.evaluateJavascript(
                    source:
                        "window.document.getElementsByTagName('html')[0].outerHTML;");
}

推荐阅读