aardio 范例: WebView2 - 调用 JS 函数

//调用 JS 函数
import win.ui;
/*DSG{{*/
var winform = win.form(text="WebView2 - 调用 JS 函数";right=966;bottom=622)
winform.add(
btnCallJavaScript={cls="button";text="调用 JS 函数";left=615;top=537;right=869;bottom=606;color=14120960;db=1;dr=1;font=LOGFONT(h=-14);note="在 aardio 中调用 JavaScript 函数。";z=2};
static={cls="static";left=8;top=6;right=956;bottom=503;db=1;dl=1;dr=1;dt=1;z=1}
)
/*}}*/

import web.view;
var wb = web.view(winform.static);

wb.html = /**
<!DOCTYPE html><html>
<head>
    <meta charset="utf-8" /> 
    <script>!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).mitt=n()}(this,function(){return function(e){return{all:e=e||new Map,on:function(n,t){var f=e.get(n);f?f.push(t):e.set(n,[t])},off:function(n,t){var f=e.get(n);f&&(t?f.splice(f.indexOf(t)>>>0,1):e.set(n,[]))},emit:function(n,t){var f=e.get(n);f&&f.slice().map(function(e){e(t)}),(f=e.get("*"))&&f.slice().map(function(e){e(n,t)})}}}});
    emitter = mitt();//github.com/developit/mitt </script> 
</head>
<body>  

<script> 

    //响应事件
    emitter.on("setData", function(v){
        document.body.insertAdjacentHTML("beforeEnd", JSON.stringify(v) + "<br>" )
    } );

    //定义全局函数
    window.setData = function(v){
        document.body.insertAdjacentHTML("beforeEnd", JSON.stringify(v) + "<br>" )
    } 

</script>

</body> 
**/

// aardio 按钮事件
winform.btnCallJavaScript.oncommand = function(id,event){

    /*
    注意 wb.invoke, wb.doScript 都是非阻塞异步调用 JS。
    但 wb.eval, wb.xcall 都会阻塞等待 JS 返回值。

    在被网页回调的 aardio 函数内部调用 wb.eval, wb.xcall 可能阻塞后续调用。
    应改用非阻塞的 wb.invoke, wb.doScript 。
    或者通过 winform.setTimeout 异步调用 wb.invoke, wb.doScript。
    */

    /*
    调用 JS 全局函数，参数 @1 指定函数名，
    可传任意个数参数（参数用 JSON 转换为纯 JS 对象）。
    */
    wb.xcall("setData",{
        name = "测试1";
        passowrd = "123456"
    }); 

    /*
    调用 JS 全局对象的成员函数。
    如果参数@1 不包含回车、换行、分号、大括号，圆括号，
    则最后一个点号前的对象设为被调用函数的 this 参数。
    */
    wb.xcall("emitter.emit",
        "setData",{
        name = "测试2";
        passowrd = "123456"
    }); 

    //参数 @1 可以指定返回函数对象的 JS 表达式。 
    wb.xcall("function(args){
        emitter.emit('setData',args)
    }", {
        name = "测试3";
        passowrd = "123456"
    });  
}

winform.show();
win.loopMessage();
Markdown 格式