百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

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

zhezhongyun 2024-12-25 16:47 72 浏览

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>

相关推荐

3D边框效果绝了Jetpack Compose也太会玩了吧

在JetpackCompose中创建惊艳的3D边框效果大家好！今天我要分享一个超酷的技巧——如何在JetpackCompose中创建3D边框效果。这种效果可以应用于任何视图和任何形状...

“雨”你同行，他们在岗位上为您守护……

7月10日京津冀地区迎来降雨天气京铁人以“降雨预警”为令迎风而上逆水而行全力守护铁路运输安全雨帘下的“摆渡人”北京站、石家庄站及时铺设防滑垫，检查排水设施，确保旅客行走通道安全。北京北站加密站台巡视...

战士实用小福利!巧用宏命令让血条更直观

很多战士朋友经常被怒气和血条所困扰，如何及时的进行规避开启防御技能？如何更好的利用怒气打出伤害？成为了众多战士的首要问题。现在即使在没有插件的支持下我们也可以实现这样的功能，巧用宏命令就可以让怒气和血...

python操作word 添加导航栏，导航栏在左边显示

点赞标记，明天就能用上这几个技巧！要实现Python生成Word文档并显示左侧导航栏（即导航窗格），需通过标题样式标记文档结构+修改文档视图设置两步完成。以下是详细且经过验证的解决方案，基于pytho...

田渊栋等原班人马作:AI生成长篇故事，数千字长文也能连贯、有趣

机器之心报道编辑：小舟、陈萍以后，写故事这脑力活可以交给AI了。前段时间，模仿人类写作过程的语言模型Re^3发布，该模型不需要微调大模型，而是通过设计prompt来生成一致性强的故事。现在...

VBA常用代码_1、文本格式整理

本人财务岗位，非专业编程人员，请勿以专业看待哈，能用无BUG即可！均是我在工作中常用的补充功能，且具有通用性的功能。基于实用性而编写。不见理论，只需要你会复制粘贴就行。看完第一篇文章，结合之后更新的内...

行业首选的文档管理工具Aspose.Words新版本v16.3.0发布

Aspose.Words是一款先进的文档处理控件，在不使用MicrosoftWords的情况下，它可以使用户在各个应用程序中执行各种文档处理任务，其中包括文档的生成、修改、渲染、打印，文档格式转换和...

作为前端工程师必须懂得的33个CSS核心概念

你真的懂CSS吗？层叠样式表（CSS）是网页设计的支柱，能将单调的HTML转变为视觉惊艳的交互界面。要精通CSS，必须理解从基础选择器到动画、响应式设计等高级技巧在内的核心概念。无论你是初学者还是资深...

全力做好节假日期间服务保障工作

为保障五一期间ETC运营工作正常有序开展，甘肃省高速公路ETC管理服务中心全力以赴、恪尽职守，使各项工作有备无患。一是要求中心全体职工牢固树立安全发展观念，时刻紧绷“安全弦”，夯实安全生产基础，落实安...

Manila&#39;s hyping up of illegal &#39;arbitral award&#39; nothing but a damp squib

Manila'shypingupofillegal'arbitralaward'nothingbutadampsquib:ChinaDailyeditorial-Opi...

QLabel 文字两端对齐解决方案

在Qt开发中，实现QLabel文字两端对齐是一个常见需求。本文将介绍多种在Qt中实现QLabel文字两端对齐的方法及其原理。Qt本身具备文字两端对齐的支持，但需要同时使用Qt::AlignJ...

tkinter中的一些自定义控件，你知道几个呢?

用tkinter图形库编写过界面的朋友都知道，tkinter中拥有的图形控件很少，ttk中虽然新增了一些，但是这也不足以满足我们的使用，因为我们在编写图形界面的时候会用到各种各样的控件，有些是tkin...

一个人的婚礼:她送给自己的新婚礼物是遗体捐献书

style="text-indent:2em;">1月20日，在重庆武隆区医院的病房里，爱心人士为21岁的杨春燕在医院举办了一场没有新郎的婚礼，圆了春燕穿婚纱、走红毯的心愿，仪式后春燕签署了遗体...

毕业论文小技巧:word排版之章节自动化编号

设置大纲多级列表目的是方便增删章节时实现章节标号的自动编号，并且实现论文图表公式编号按照章节顺序自动编号。准备工作：假设前面已经定义好章节标题样式分别为标题一论文章标题、论文节标题、论文小节标题、论文...

伊朗呼吁土耳其立即终止对叙军事行动

style="text-indent:2em;">新华社德黑兰1月21日电（记者马骁穆东）伊朗外交部21日发表声明说，希望土耳其立即终止在叙利亚阿夫林发起的军事行动，避免叙北部危机进一步恶化。...

一周热门
最近发表
标签列表