繁体   English   中英

如何从 Flutter Z3E7D16622A52391BD7BF68CAE 中的 JavaScript function 中获取值

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

嗨,我有一个 webView,我只是想从 WebView 中获取值,以在用户按下按钮时返回真或假,我已经设法 console.log 它,但是我如何获取这个值并将其放入flutter? 谢谢。

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([
          ])
      ),
    );
  }
}

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

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

它将使用您选择的名称创建一个 JS window object,然后您可以使用您的值从 JS 调用它。 您可以在 Flutter 中返回值。 基本上整个 Cordova 都是建立在这种机制之上的。

一些更实用的建议:

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM