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

Question

嗨，我有一个 webView，我只是想在用户按下按钮时从 WebView 获取值 return 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 window 对象，然后您可以使用您的值从 JS 调用它。您可以在 Flutter 中取回值。基本上整个Cordova都是建立在这样的机制上的。

一些更实用的建议：

给你的频道起一个尽可能唯一的名字，以避免与其他 JS 库的命名空间冲突。绝对不是示例中的 "Print"。
回调很可能是异步的。不要指望 WebView 丢弃所有内容只是为了立即在您的 Channel 回调中传递一个值。它很可能会在 JavaScript 中继续做其他事情，回调将在稍后出现。

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

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

How do you get the value from a JavaScript function in Flutter WebView?

android

webview

flutter