Flutter调用已存在的JavaScript方法提示找不到问题求助

核心问题原因 #

你定义的sendMessageToUnity和init函数是const声明的局部函数，仅在custom.js的模块作用域内可见，并未暴露到全局window对象上。虽然window.onload在同一作用域内可以调用，但Flutter的js.context访问的是全局window对象，因此找不到这些方法。

修复方案 #

修改custom.js代码，将函数直接挂载到window对象上，使其成为全局可访问的方法：

// 挂载到window对象，暴露为全局方法
window.init = () => {
    console.log("Hello World");
}

window.sendMessageToUnity = (message) => {
    console.log("Message being sent to Unity: " + message);
    var iframe = document.getElementById('unityIframe');
    iframe.contentWindow.postMessage(message, '*');
}

window.onload = () => {
    init();
    sendMessageToUnity('yup');
}

验证步骤 #

1. 替换原有custom.js代码后，重新运行Flutter Web应用
2. 点击按钮，此时js.context.callMethod可正常找到全局挂载的sendMessageToUnity和init方法
3. 查看浏览器控制台，应能看到Message being sent to Unity: I am Flutter和Hello World的输出

额外说明 #

• 确保custom.js放在Flutter Web的web目录下，且在index.html中正确引入（建议放在<body>标签末尾，保证DOM加载完成后执行）
• 若不需要从外部访问函数，可保留局部作用域声明；但需要Flutter Dart调用时，必须将函数挂载到全局window对象

内容的提问来源于stack exchange，提问作者Zee Scorpio