如何通过Flutter的flutter_inappwebview直接返回function给Webview JS？

问题根源 #

flutter_inappwebview通过addJavaScriptHandler向JS返回Map时，会对数据做JSON序列化处理，但JSON格式本身不支持函数类型，所以你定义的函数会被强制转为字符串，只能通过eval才能使用。

可行解决方案 #

方案1：JS端预定义函数生成器，Flutter传递参数

在JS侧提前写好函数的逻辑模板，Flutter只传递函数需要的动态参数（比如你的uuid），JS拿到参数后生成对应的函数。

JS端代码：

// 提前定义生成readValue函数的工具方法
function createReadValue(uuid) {
  return async function() {
    const response = await window.myyApp.callHandler('eventName', { 'this': uuid });
    return response;
  };
}

// 获取Flutter返回的数据后，生成目标函数
window.myyApp.callHandler('getTargetData').then(flutterData => {
  flutterData.readValue = createReadValue(flutterData.uuid);
  // 此时flutterData.readValue就是可直接调用的async函数
});

Flutter端返回数据：

return {
  // 其他属性
  'uuid': uuid, // 只传递动态参数
};

方案2：Flutter通过evaluateJavascript直接注入函数

跳过addJavaScriptHandler返回函数的方式，直接用Flutter的evaluateJavascript方法，将函数注入到JS上下文，或者挂载到指定对象上。

Flutter端代码：

// 在WebView加载完成后执行注入
webViewController?.evaluateJavascript(source: """
  // 直接在JS全局上下文挂载函数
  window.targetReadValue = async function() {
    const response = await window.myyApp.callHandler('eventName', { 'this': '$uuid' });
    return response;
  };
""");

JS端直接调用：

// 直接使用注入好的函数
const result = await window.targetReadValue();

如果需要和其他属性关联，也可以在evaluateJavascript中把函数注入到你从Flutter拿到的对象上：

// 假设flutterData是从addJavaScriptHandler拿到的对象
window.myyApp.callHandler('getTargetData').then(flutterData => {
  flutterData.readValue = async function() {
    const response = await window.myyApp.callHandler('eventName', { 'this': '$uuid' });
    return response;
  };
});

内容的提问来源于stack exchange，提问作者Reza Aslejeddian