Sciter窗口间状态事件交互（四）

前言

Sciter 是一个高质量但小众的嵌入式 UI 引擎，适合追求性能、体积和原生集成的桌面应用开发者。

我觉得 Sciter 比较有意思，它很小众，是闭源的，商用需要许可。它是Andrew Fedoniouk开发维护，Andrew获得了物理学和应用数学硕士学位以及艺术文凭。他的职业生涯始于俄罗斯航空航天工业的研究员。这种跨领域背景使他既具备深厚的技术功底，又懂得用户界面设计的艺术。

Sciter官网：https://sciter.com/ 2025-11-15 sciter-js-sdk最新版v6.0.2.28

1.Window事件监听与发送事件

1.1 拿到对方窗口对象发送

父窗口

<html>
<head>
    <meta charset="utf-8">
    <title>父窗口</title>
    <script src="../../module/zepto.js"></script>
    <link rel="stylesheet" href="../../css/lk-all.css">
</head>
<body class="flex-column lk-gap-10">
<h1>这里是父窗口</h1>
<button id="create" class="lk-button lk-button-primary">创建子窗口</button>
<button id="send" class="lk-button lk-button-primary">发送事件/数据到子窗口</button>
<button id="post" class="lk-button lk-button-primary">发送事件/数据到子窗口（异步）</button>

<script>
    let number = 0;
    let sonWindow
    $('#create').click(function () {
        // 更多Window属性： https://docs.sciter.com/docs/DOM/Window
        sonWindow = new Window({
            url: __DIR__ + 'message_son01.html',
        });
    })
    $('#send').click(async function () {
        const event = new Event('my-event-name', {
            data: 'lingkang你好~我是同步发送: ' + number
        })
        // 同步发送
        await sonWindow.dispatchEvent(event)
        number++
    })
    $('#post').click(function () {
        // 更多Event属性： https://docs.sciter.com/docs/DOM/Event
        const event = new Event('my-event-name', {
            data: 'lingkang 异步: ' + number++
        })
        // 同步发送
        sonWindow.postEvent(event)
    })
</script>
</body>
</html>

子窗口

<html window-width="400"
      window-height="400"
>
<head>
    <meta charset="utf-8">
    <title>子窗口son</title>
    <script src="../../module/zepto.js"></script>
    <link rel="stylesheet" href="../../css/lk-all.css">
</head>
<body>
<h1>这里是子窗口</h1>
<p id="content"></p>
<script>
    Window.this.on("my-event-name", function (event) {
        $('#content').html(`收到的数据：${event.data} 事件类型：${event.type}`)
    })
</script>
</body>
</html>

效果：

image-1763568226057

1.2 没有对方窗口对象发送事件/数据

没有明确的接收窗口时，把事件发送到当前进程所有监听事件的窗口

发送方

<html>
<head>
    <meta charset="utf-8">
    <title>父窗口</title>
    <script src="../../module/zepto.js"></script>
    <link rel="stylesheet" href="../../css/lk-all.css">
</head>
<body class="flex-column lk-gap-10">
<h1>这里是父窗口</h1>
<button id="create" class="lk-button lk-button-primary">创建子窗口</button>
<button id="post" class="lk-button lk-button-primary">发送事件/数据（异步）</button>

<h3 id="result"></h3>
<script>
    let number = 0;
    $('#create').click(function () {
        // 更多Window属性： https://docs.sciter.com/docs/DOM/Window
        const sonWindow = new Window({
            url: __DIR__ + 'message_son02.html',
        });
    })
    $('#post').click(function () {
        // 更多Event属性： https://docs.sciter.com/docs/DOM/Event
        const event = new Event('global-event-name', {
            data: 'lingkang 异步: ' + number++
        })
        // 异步发送。注意没有 this
        Window.post(event)
    })
</script>
</body>
</html>

某个接收的窗口

<html window-width="400"
      window-height="400"
>
<head>
    <meta charset="utf-8">
    <title>路人甲窗口</title>
    <script src="../../module/zepto.js"></script>
    <link rel="stylesheet" href="../../css/lk-all.css">
</head>
<body>
<h1>这里是路人甲窗口</h1>
<p id="content"></p>
<script>
    // 可以接受到全局的、定向的事件
    Window.this.on("global-event-name", function (event) {
        $('#content').html(`收到的数据：${event.data} 事件类型：${event.type}`)
    })
</script>
</body>
</html>

截图

image-1763569906618

1.3 总结

拿到对方窗口句柄使用：

  • targetWindow.dispatchEvent(event) // 同步
  • targetWindow.postEvent(event) // 异步

未知哪个窗口发送到全局：（都是异步）

  • Window.post(event) // 注意没有 this
  • Window.send(event) // 遇到第一个消费事件的窗口即停止。

其中父窗口可以使用 Window.all 遍历所有窗口，从而找到想要发送的窗口对象

for(let targetWin of Window.all){
// ...
console.log(targetWin)
}

2.创建时传参

<html>
<head>
    <meta charset="utf-8">
    <title>父窗口</title>
    <script src="../../module/zepto.js"></script>
    <link rel="stylesheet" href="../../css/lk-all.css">
</head>
<body class="flex-column lk-gap-10">
<h1>这里是父窗口</h1>
<button id="create" class="lk-button lk-button-primary">创建子窗口</button>

<script>
    let number = 0;
    let sonWindow
    $('#create').click(function () {
        // 更多Window属性： https://docs.sciter.com/docs/DOM/Window
        sonWindow = new Window({
            url: __DIR__ + 'message_son03.html',
            // 使用json
            parameters: {
                data: '你好啊，son'
            }
        });
    })
</script>
</body>
</html>

子窗口

<html window-width="400"
      window-height="400"
>
<head>
    <meta charset="utf-8">
    <title>子窗口son</title>
    <script src="../../module/zepto.js"></script>
    <link rel="stylesheet" href="../../css/lk-all.css">
</head>
<body>
<h1>这里是子窗口</h1>
<p id="content"></p>
<script>
    const parameters = Window.this.parameters
    $('#content').html(JSON.stringify(parameters))
</script>
</body>
</html>

截图

image-1763570895129