本章来介绍Sciter创建窗口和多窗口（三）

前言

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

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

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

1.在js中创建新窗口

使用 javascript 中创建

1.1. 直接使用代码

<html>
<head>
    <title>父窗口</title>
    <script src="../../module/zepto.js"></script>
    <link rel="stylesheet" href="../../css/lk-all.css">
</head>
<body>

<button id="show" class="lk-button lk-button-primary">Show new Window</button>
<script>
    $('#show').click(function () {
        // 更多Window属性： https://docs.sciter.com/docs/DOM/Window
        let toastWindow = new Window({
            type: Window.DIALOG_WINDOW,
            url: __DIR__ + "my-new01.html",
            // width: 400, // 可选
            // height: 400
        });
    })
</script>
</body>
</html>
  1. 路径可以使用当前目录下的路径：url: __DIR__ + “my-new01.html”，__DIR__ 以 /结尾。
  2. 路径可以使用绝对路径 url: C:\Users\Administrator\Desktop\project\sciter\lk-sciter-ui\z_test\01.window\my-new01.html

子窗口 my-new01.html

<html window-width="200"
      window-height="100"
>
<head>
    <meta charset="utf-8">
    <title>我是一个新窗口</title>
    <style></style>
    <script src="../../module/zepto.js"></script>
    <link rel="stylesheet" href="../../css/lk-all.css">
</head>
<body>
<button class="lk-button lk-button-primary">这是一个新窗口</button>
</body>
</html>

image-1763565254609

1.2 使用动态html代码

<html>
<head>
    <title>父窗口</title>
    <script src="../../module/zepto.js"></script>
    <link rel="stylesheet" href="../../css/lk-all.css">
</head>
<body>

<button id="show" class="lk-button lk-button-primary">Show new Window</button>
<script>
    const newHtml=`<html window-width="200"
      window-height="100"
>
<head>
    <meta charset="utf-8">
    <title>我是一个新窗口</title>
<link rel="stylesheet" href="../../css/lk-all.css">
</head>
<body>
<button class="lk-button lk-button-primary">这是一个新窗口</button>
</body>
</html>`
    
    $('#show').click(function () {
        // 更多Window属性： https://docs.sciter.com/docs/DOM/Window
        let toastWindow = new Window({
            type: Window.DIALOG_WINDOW,
            html: newHtml,
            // width: 400, // 可选
            // height: 400
        });
    })
</script>
</body>
</html>

image-1763565591650