如何从 Flutter WebView 中的 JavaScript 函数中获取值？

Question

您好，我有一个 webView，我只是想从 WebView 中获取值以在用户按下按钮时返回 true 或 false，我已经设法 console.log 它，但是我如何获得这个值和把它放在颤动中？谢谢。

web.WebView(
          initialUrl: "https://www.tiktok.com/@tiktok",
          javascriptMode: web.JavascriptMode.unrestricted,
          onWebViewCreated: (web.WebViewController webViewController) {
            _controller.complete(webViewController);
            _myController = webViewController;
          },
          onPageFinished: (String url) {
            _myController.evaluateJavascript("""
            window.onclick = e => {
    console.log(e.target.className);
    console.log(e.target.tagName);
}
    var element = document.getElementsByClassName('jsx-4074580611');

    element[0].addEventListener('click', function(event) {
       setTimeout(function (){ 
        if(element[0].innerText == 'Following') {
    console.log("True");
    //RETURN TRUE TO FLUTTER
  }else{
    console.log("False");
    //RETURN FALSE TO FLUTTER
    }  
       }, 1500);
  });
            """);
          },
          javascriptChannels: Set.from([
          ])
      ),
    );
  }
}

Answer 1

您不会从这样的网页中得到任何返回，因为该页面不知道如何与您的 Flutter 容器对话。您需要一个回调，有趣的是，您已经在代码中定义了该回调，但尚未使用。这是javascriptChannels：

https://pub.dev/documentation/webview_flutter/latest/webview_flutter/WebView/javascriptChannels.html

它将使用您选择的名称创建一个 JS 窗口对象，然后您可以使用您的值从 JS 调用它。你可以在 Flutter 中获得价值。基本上整个 Cordova 都是建立在这种机制之上的。

一些更实用的建议：

• 为您的频道提供尽可能唯一的名称，以避免与其他 JS 库发生命名空间冲突。绝对不是示例中的“打印”。
• 回调很可能是异步的。不要指望 WebView 放弃一切只是为了立即在您的 Channel 回调中传递一个值。它很可能会在 JavaScript 中继续做其他事情，回调将在稍后出现。

免责声明：我对 Flutter 的经验为零，但我在 iOS 和 Android 上的 WebView 互操作性方面拥有大量经验。请为您现在可能想问的任何进一步的高级 Flutter 问题创建一个新问题。