如何在 Flutter WebView 或 InAppWebView 中添加 JavaScriptInterface？答案

【问题标题】：How to add JavaScriptInterface in Flutter WebView or InAppWebView?如何在 Flutter WebView 或 InAppWebView 中添加 JavaScriptInterface？
【发布时间】：2021-01-03 10:19:38
【问题描述】：

在Android中我可以添加javascript接口：

class JsInterface(private val onClose: () -> Unit) {
    @android.webkit.JavascriptInterface    
    fun close() {
        onClose()    
    }
}
...
addJavascriptInterface(JsInterface { this@WebViewActivity.finish() }, "client")

如何在 Flutter WebView 或 InAppWebView 或其他包中相同？

【问题讨论】：

标签： android flutter dart webview

【解决方案1】：

我建议您阅读this 的文章，他们在其中仔细查看flutter_inappwebview。但试试这个代码示例以获得快速答案：

              InAppWebView(
                initialUrl: 'url',
                onWebViewCreated: (controller) =>
                    control.webController = controller
                      ..addJavaScriptHandler(
                        handlerName: 'serverSideJsFuncName',
                        callback: (data) {
                          // Catch and handle js function
                        },
                      ),
              )

另一方面，如果您想更新服务器端 JavaScript，您可以通过 InAppWebViewController 来完成，如下所示：

  Future<void> evalJs(dynamic param) async {
    await webController.evaluateJavascript(
        source: "window.someFuncName( '$param ');");
  }

【讨论】：

谢谢！在 js 端运行这段代码：“ if(window.client) window.client.close()” 如果只写“ ..addJavaScriptHandler(handleName: 'close', callback: (data) {...}) ” 它不起作用。你知道怎么做吗？
很抱歉，但我认为我做不到。尝试从应用程序针对服务器调试您的操作。我们也遇到了一些问题，直到我们找到正确的方法来通过每个移动设备和后端的名称访问功能。试试我在 JavascriptHandlers 部分发布的文章。
你知道如何通过evaluate添加js接口吗？
Evaluate 用于从应用程序调用服务器上的一些 javascript 函数。如果你想处理这样的函数，你必须像这样定义它 window.addEventListener("flutterInAppWebViewPlatformReady", function(event) { window.flutter_inappwebview.callHandler('handlerFoo') .then(function(result) { // 打印到控制台数据进来 window.flutter_inappwebview .callHandler('handlerFooWithArgs', 1, true, ['bar', 5], {foo: 'baz'}, result); }); });
每个函数必须有 "addEventListener("flutterInAppWebViewPlatformReady",..." 和 window.flutter_inappwebview.callHandler('handlerFoo') 才能被该 WebView 注册。然后你可以通过调用方法来调用它我在示例中写过，但是您将输入“handlerFoo”而不是“someFuncName”。在此之后，您应该能够处理来自应用程序的 JS。