我正在建立网站和Flutter 翼之间的通信,我想在按钮点击上emits 消息,我已经实现了下面的代码.

 <button onclick="buttonClick()" type="button">Cancel</button>

<script>

        function buttonClick() {

       window.addEventListener("flutterInAppWebViewPlatformReady", function(event) {

             window.flutter_inappwebview.callHandler('cancelbuttonState', 1, true,['msg','CancelbuttonClicked'], {test:'Go-Back'}).then(function(result) {
            
             alert("Hello! Cancel Buttton clicked!!");
              console.log('Hello! Cancel Buttton clicked!!');

             });
           });
          
         }
       </script>

在Fighter Side中,我实现了以下内容以获取消息

controller.addJavaScriptHandler(
                    handlerName: "cancelbuttonState",
                    callback: (args) async {
                      print('Cancel Button clicked');
              
                      return args.reduce((curr, next) => curr + next);
                    });

但无论是JavaScript还是app dint,都给了我控制台打印的感谢.

推荐答案

您在Cancel函数体中执行以下行的时间太晚了.您需要更早地添加监听程序才能注册回调.

换句话说,您正在监听一个已经完成的事件.

window.addEventListener("flutterInAppWebViewPlatformReady" .....

以类似于this:的方式重新组织代码

<button onclick="buttonClick()" type="button">Cancel</button>
<script>
    isAppReady = false;
    window.addEventListener("flutterInAppWebViewPlatformReady", function (event) {
        isAppReady = true;
    });
    function buttonClick() {
        if (isAppReady) {
            window.flutter_inappwebview.callHandler('cancelbuttonState', 1, true, ['msg', 'CancelbuttonClicked'], { test: 'Go-Back' }).then(function (result) {
                alert("Hello! Cancel Buttton clicked!!");
                console.log('Hello! Cancel Buttton clicked!!');
            });
        }
    }
</script>

Javascript相关问答推荐

为什么(1 + Number.Min_UTE)等于1?

如何从JavaScript中的公共方法调用私有方法?

reaction如何在不使用符号的情况下允许多行返回?

在JS中获取名字和姓氏的首字母

在JavaScript中对大型级联数组进行切片的最有效方法?

vanillajs-datepicker未设置输入值,日期单击时未触发更改事件

React:未调用useState变量在调试器的事件处理程序中不可用

从实时数据库(Firebase)上的子类别读取数据

Google Apps脚本中的discord邀请API响应的日期解析问题

如何从调整大小/zoom 的SVG路径定义新的d属性?""

如何添加绘图条形图图例单击角形事件

如何在模块层面提供服务?

为什么Mutations 观察器用微任务队列而不是macrotask队列处理?

在使用位板时,如何在Java脚本中判断Connect 4板中中柱的对称性?

Rxjs流中生成IMMER不能在对象上操作

如何确保预订系统跨不同时区的日期时间处理一致?

如何在Press上重新启动EXPO-AV视频?

未捕获语法错误:Hello World中的令牌无效或意外

使用线性插值法旋转直线以查看鼠标会导致 skip

如何在Jest中模拟函数