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

Posted 2023-02-23

【中文标题】Flutter：如何在运行 JavaScript 函数并显示 html 后等待 WebView 完成加载？

【英文标题】：Flutter: How to wait for WebView to finish loading after running JavaScript function and display the html?

【发布时间】：2021-07-19 07:44:01

【问题描述】：

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

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

打开网站， 运行 javascript 函数以在文本字段中填充一些内容并按提交， 等待网站执行js并完成加载， 将 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());它始终为空。

【参考方案1】：

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

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