HTML 也能开发桌面软件之 NW.js 中的 Window 窗体类

myzbx 2024-12-07 15:14 13 浏览

01）NW.js 是什么?
02）NW.js 中的配置指南
03）NW.js 中的 App 应用程序类

在之前的系列教程中，我们分别为大家介绍了 NW.js 的下载安装基本使用以及配置指南以及应用程序 `App` 类的介绍。

下面我们继续来为大家介绍 NW.js 中的 Window 类。Window 类是 NW.js 框架对窗口或者窗体的抽象、封装的类，其中定义了各种成员属性、方法以及事件，可以让我们对窗体相关的进行各种操作。

下面是该类的成员明细：

类的明细

属性明细

属性名	描述
win.window	获取原生的DOM window对象
win.x	窗口的X坐标
win.y	窗口的Y坐标
win.width	窗口的宽度
win.height	窗口的高度
win.title	窗口的标题
win.menu	窗口的菜单栏对象
win.isAlwaysOnTop	窗口是否总在最前
win.isFullscreen	窗口是否处于全屏模式
win.isTransparent	窗口是否透明
win.isKioskMode	窗口是否处于kiosk模式
win.zoomLevel	窗口的缩放级别
win.cookies.*	访问窗口的cookie

方法明细

方法名	描述
Window.get([window_object])	获取指定窗口对象的Window实例
Window.getAll(callback)	获取所有窗口的Window实例
Window.open(url, [options], [callback])	打开一个新窗口
win.moveTo(x, y)	移动窗口到指定位置
win.moveBy(x, y)	相对当前位置移动窗口
win.resizeTo(width, height)	调整窗口大小到指定尺寸
win.setInnerWidth(width)	设置窗口内部宽度
win.setInnerHeight(height)	设置窗口内部高度
win.resizeBy(width, height)	相对当前大小调整窗口尺寸
win.focus()	使窗口获得焦点
win.blur()	使窗口失去焦点
win.show([is_show])	显示窗口
win.hide()	隐藏窗口
win.close([force])	关闭窗口
win.reload()	重新加载窗口
win.reloadDev()	重新加载窗口（开发模式）
win.reloadIgnoringCache()	忽略缓存重新加载窗口
win.maximize()	最大化窗口
win.unmaximize()	取消最大化窗口
win.minimize()	最小化窗口
win.restore()	恢复窗口
win.enterFullscreen()	进入全屏模式
win.leaveFullscreen()	退出全屏模式
win.toggleFullscreen()	切换全屏模式
win.enterKioskMode()	进入kiosk模式
win.leaveKioskMode()	退出kiosk模式
win.toggleKioskMode()	切换kiosk模式
win.setTransparent(transparent)	设置窗口透明度
win.setShadow(shadow) (Mac)	设置窗口阴影（仅适用于Mac）
win.showDevTools([iframe], [callback])	显示开发者工具
win.closeDevTools()	关闭开发者工具
win.getPrinters(callback)	获取可用打印机列表
win.isDevToolsOpen()	检查开发者工具是否打开
win.print(options)	打印窗口内容
win.setMaximumSize(width, height)	设置窗口最大尺寸
win.setMinimumSize(width, height)	设置窗口最小尺寸
win.setResizable(resizable)	设置窗口是否可调整大小
win.setAlwaysOnTop(top)	设置窗口是否总在最前
win.setVisibleOnAllWorkspaces(visible) (Mac and Linux)	设置窗口是否在所有工作区可见（仅适用于Mac和Linux）
win.canSetVisibleOnAllWorkspaces() (Mac and Linux)	检查是否可以设置窗口在所有工作区可见（仅适用于Mac和Linux）
win.setPosition(position)	设置窗口位置
win.setShowInTaskbar(show)	设置窗口是否在任务栏显示
win.requestAttention(attension)	请求用户注意（如闪烁任务栏图标）
win.capturePage(callback [, config ])	捕获窗口页面截图
win.captureScreenshot(options [, callback])	捕获窗口屏幕截图
win.setProgressBar(progress)	设置任务栏进度条
win.setBadgeLabel(label)	设置应用程序标记标签
win.eval(frame, script)	在指定框架中执行JavaScript代码
win.evalNWBin(frame, path)	在指定框架中执行NW.js二进制文件
win.evalNWBinModule(frame, path, module_path)	在指定框架中执行NW.js二进制模块
win.removeAllListeners([eventName])	移除所有或指定事件的监听器

事件明细

事件名	描述
close	窗口关闭时触发
closed	窗口完全关闭后触发
loading	窗口开始加载时触发
loaded	窗口加载完成时触发
document-start(frame)	文档开始加载时触发，参数为相关框架
document-end(frame)	文档加载结束时触发，参数为相关框架
focus	窗口获得焦点时触发
blur	窗口失去焦点时触发
minimize	窗口最小化时触发
restore	窗口从最小化状态恢复时触发
maximize	窗口最大化时触发
move(x, y)	窗口移动时触发，参数为新的坐标
resize(width, height)	窗口大小改变时触发，参数为新的尺寸
enter-fullscreen	进入全屏模式时触发
leave-fullscreen	离开全屏模式时触发
zoom	窗口缩放级别变化时触发
capturepagedone	页面截图完成时触发
devtools-opened(url)	开发者工具打开时触发，参数为开发者工具的URL
devtools-closed	开发者工具关闭时触发
new-win-policy (frame, url, policy)	新窗口策略事件，用于控制如何打开新窗口
navigation (frame, url, policy)	导航事件，用于控制页面导航行为

基本实例

接下来我们分别用几个实例来演示属性、方法以及事件的基本使用。

属性实例

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>NW.js 窗口属性示例</title>
</head>
<body>
    <h1>NW.js 窗口属性示例</h1>

    <div id="win-window">win.window:</div>
    <hr>
    <div id="win-x">win.x:</div>
    <hr>
    <div id="win-y">win.y:</div>
    <hr>
    <div id="win-width">win.width:</div>
    <hr>
    <div id="win-height">win.height:</div>
    <hr>
    <div id="win-title">win.title:</div>
    <hr>
    <div id="win-menu">win.menu:</div>
    <hr>
    <div id="win-isAlwaysOnTop">win.isAlwaysOnTop:</div>
    <hr>
    <div id="win-isFullscreen">win.isFullscreen:</div>
    <hr>
    <div id="win-isTransparent">win.isTransparent:</div>
    <hr>
    <div id="win-isKioskMode">win.isKioskMode:</div>
    <hr>
    <div id="win-zoomLevel">win.zoomLevel:</div>
    <hr>
    <div id="win-cookies">win.cookies:</div>
    <hr>

    <script>
        // 获取属性值的安全函数
        function safeGetProperty(obj, prop) {
            try {
                // 先判断属性是否存在于对象的自身属性或原型链中
                if (prop in obj) {
                    return obj[prop] !== undefined ? obj[prop] : 'Undefined';
                } else {
                    return 'Undefined';
                }
            } catch (error) {
                return 'Undefined';
            }
        }

        const win = nw.Window.get();

        // 自动打开开发者工具
        // win.showDevTools();

        // 使用安全函数获取并输出每个属性的值
        document.getElementById('win-window').textContent += ` ${safeGetProperty(win, 'window')}`;
        document.getElementById('win-x').textContent += ` ${safeGetProperty(win, 'x')}`;
        document.getElementById('win-y').textContent += ` ${safeGetProperty(win, 'y')}`;
        document.getElementById('win-width').textContent += ` ${safeGetProperty(win, 'width')}`;
        document.getElementById('win-height').textContent += ` ${safeGetProperty(win, 'height')}`;
        document.getElementById('win-title').textContent += ` ${safeGetProperty(win, 'title')}`;
        document.getElementById('win-menu').textContent += ` ${safeGetProperty(win, 'menu')}`;
        document.getElementById('win-isAlwaysOnTop').textContent += ` ${safeGetProperty(win, 'isAlwaysOnTop')}`;
        document.getElementById('win-isFullscreen').textContent += ` ${safeGetProperty(win, 'isFullscreen')}`;
        document.getElementById('win-isTransparent').textContent += ` ${safeGetProperty(win, 'isTransparent')}`;
        document.getElementById('win-isKioskMode').textContent += ` ${safeGetProperty(win, 'isKioskMode')}`;
        document.getElementById('win-zoomLevel').textContent += ` ${safeGetProperty(win, 'zoomLevel')}`;

        // 特别处理 cookies 作为一个对象
        safeGetProperty(win, 'cookies') !== 'Undefined' && win.cookies.getAll({}, function(cookies) {
            document.getElementById('win-cookies').textContent += ` ${cookies.length > 0 ? JSON.stringify(cookies, null, 2) : '无 cookie'}`;
        });
    </script>
</body>
</html>

截图：

方法实例

01）打开关闭

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>启动窗体</title>
</head>
<body>
    <h1>启动窗体</h1>
    <p>点击下方按钮打开第二个窗体。</p>
    <button onclick="openWindow()">打开 second.html</button>

    <script>
        function openWindow() {
            nw.Window.open('second.html', {
                width: 400,
                height: 300,
                focus: true
            });
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Second Window</title>
</head>
<body>
    <h1>Second Window</h1>
    <p>点击下方按钮尝试关闭窗体。</p>
    <button onclick="closeWindow()">关闭当前窗体</button>

    <script>
        function closeWindow() {
            let result = confirm("您确定要关闭当前窗体吗?");
            if (result) {
                nw.Window.get().close();
            } else {
                alert("您取消了窗体关闭操作");
            }
        }
    </script>
</body>
</html>

02）窗体传值

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>启动窗体</title>
</head>
<body>
    <h1>启动窗体</h1>
    <p>点击下方按钮打开第二个窗体。</p>
    <button onclick="openWindow()">打开 second.html</button>
    
    <p>来自 second.html 的文本：</p>
    <p id="receivedText">尚无文本</p>

    <script>
        function openWindow() {
            nw.Window.open('second.html', {
                width: 400,
                height: 300,
                focus: true
            }, function(win) {
                // 打开控制台以便调试
                win.showDevTools();
            });
        }

        // 主窗口接收消息并处理
        window.addEventListener('message', function(event) {
            console.log('接收到的消息:', event.data);
            document.getElementById('receivedText').innerText = event.data;
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Second Window</title>
</head>
<body>
    <h1>Second Window</h1>
    <p>在下方输入文本：</p>
    <textarea id="textInput" rows="4" cols="50"></textarea>

    <script>
        const textInput = document.getElementById('textInput');

        // 打开控制台以便调试
        nw.Window.get().showDevTools();

        // 监听文本框的输入事件
        textInput.addEventListener('input', function() {
            // 使用 postMessage 将文本内容发送到父窗口
            // * 是一个通配符，用于指定消息可以发送到的目标源（origin）。
            // 它表示允许消息发送到任意源
            window.opener.postMessage(textInput.value, '*');
            console.log('发送消息:', textInput.value);
        });
    </script>
</body>
</html>

事件实例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NW.js 事件演示</title>
</head>
<body>

<h1>NW.js 事件演示</h1>
<p>触发下列事件后，事件信息将显示在下方日志中：</p>
<div id="log"></div>

<script>
    const logDiv = document.getElementById('log');

    function logEvent(eventName, details) {
        const message = `[${new Date().toLocaleTimeString()}] 事件: ${eventName} ${details || ''}`;
        const logEntry = document.createElement('div');
        logEntry.textContent = message;
        logDiv.appendChild(logEntry);
    }

    // 获取当前窗口对象
    const win = nw.Window.get();

    // 事件绑定
    win.on('close', () => logEvent('close'));
    win.on('closed', () => logEvent('closed'));
    win.on('loading', () => logEvent('loading'));
    win.on('loaded', () => logEvent('loaded'));
    win.on('document-start', (frame) => logEvent('document-start', `frame: ${frame}`));
    win.on('document-end', (frame) => logEvent('document-end', `frame: ${frame}`));
    win.on('focus', () => logEvent('focus'));
    win.on('blur', () => logEvent('blur'));
    win.on('minimize', () => logEvent('minimize'));
    win.on('restore', () => logEvent('restore'));
    win.on('maximize', () => logEvent('maximize'));
    win.on('move', (x, y) => logEvent('move', `x: ${x}, y: ${y}`));
    win.on('resize', (width, height) => logEvent('resize', `width: ${width}, height: ${height}`));
    win.on('enter-fullscreen', () => logEvent('enter-fullscreen'));
    win.on('leave-fullscreen', () => logEvent('leave-fullscreen'));
    win.on('zoom', () => logEvent('zoom'));
    win.on('capturepagedone', () => logEvent('capturepagedone'));
    win.on('devtools-opened', (url) => logEvent('devtools-opened', `url: ${url}`));
    win.on('devtools-closed', () => logEvent('devtools-closed'));
    win.on('new-win-policy', (frame, url, policy) => logEvent('new-win-policy', `frame: ${frame}, url: ${url}, policy: ${policy}`));
    win.on('navigation', (frame, url, policy) => logEvent('navigation', `frame: ${frame}, url: ${url}, policy: ${policy}`));

    // 手动关闭窗口的事件处理，防止窗口直接关闭
    win.on('close', function() {
        logEvent('close');
        this.hide(); // 隐藏窗口
        console.log('Window is about to be closed');
        setTimeout(() => {
            logEvent('closed');
            this.close(true); // 强制关闭窗口
        }, 2000); // 模拟延迟操作
    });
</script>

</body>
</html>

HTML 类

上一篇：28岁CSS更换Logo，征集投票选出紫色底类圆角矩形新图标
下一篇：一文读懂JavaScript中Proxy类的多种应用场景

HTML 也能开发桌面软件之 NW.js 中的 Window 窗体类

类的明细

基本实例

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」