百度360必应搜狗淘宝本站头条
HTML APICSS 语法HTML 游戏HTML5 支持CSS 谷歌字体
当前位置：网站首页 > 技术文章 > 正文

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

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

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>

相关推荐

砌体植筋拉拔试验检验值到底是6.0KN，还是10.2KN，如何计算确定

砌体拉结筋植筋养护完成后，需对所植钢筋进行拉拔试验，以检验植筋的锚固强度是否满足设计要求。检测时，按照一定的抽样比例进行拉拔试验。根据《混凝土结构后锚固技术规程》JGJ145-2013，以同品种、同...

柴油机功率如何计算?计算柴油机功率需要哪些参数?

在汽车领域，对于柴油机功率的计算是一项重要的工作，它有助于我们更好地了解柴油机的性能和适用场景。下面我们就来详细探讨一下柴油机功率的计算方法以及所需的参数。首先，我们要了解计算柴油机功率常用的公式。在...

变压器短路阻抗的作用和计算方法（变压器短路阻抗的作用和计算方法是什么）

变压器短路阻抗的作用和计算方法短路阻抗是在负载试验中测量的一项数据，它是二次侧短接并流过额定电流时，一次侧施加的电压与额定电压的的百分数。那么测量变压器的短路阻抗有什么意义呢？其实变压器的阻抗电压乃是...

9.35m层高高支模支撑架计算书（支模架多高属于高支模）

某工厂新扩建的建筑面积为1989.2m^2，建筑物总体分为2层，但局部为4层。建筑物檐高19.4m，建筑物总高23m。建筑物呈长方形设置，长度为48.20m，宽度为23.88m，结构形式为框架结构...

吊篮(悬挂装置前梁加长)安全复核计算书

吊篮（悬挂装置前梁加长）安全复核计算书一种超常规搭设的高处作业吊篮，因使用要求将吊篮悬挂装置前梁加长设置，本计算书针对这种工况的校核，以作参考。计算依据：1、《高处作业吊篮》GB/T19155-...

电功率计算公式精编汇总（电功率计算视频讲解）

一、电功率计算公式：1在纯直流电路中：P=UIP=I2RP=U2/R式中：P---电功率（W），U---电压（V），I----电流（A），R---电阻（Ω)。2在单相交流电路中：P=UIcosφ...

灌注桩承载力检测方法及步骤（灌注桩承载力不够怎么办）

检测灌注桩的承载力是确保基础工程安全可靠的关键环节，检测结果的精细能准确为我们提供可靠的数据，让我们能准确判断桩基础的承载力，方便后续施工安排，同样也能让我们根据数据分辨出有问题桩基，采取可靠有效的措...

很哇塞的体积计算方法:向量叉乘 很哇塞的体积计算方法

高中数学必看：向量叉乘，体积的神。大家都知道a、b的向量是什么意思，但是a、b的向量又是什么？很多同学都不知道，向量的向量在高中阶段非常有用，虽然它是大学的知识，在高中阶段可以干两件事。·第一件事，表...

施工升降机基础(设置在地库顶板回顶)计算书

施工升降机基础（设置在地库顶板回顶）计算书计算依据：1、《施工现场设施安全设计计算手册》谢建民编著2、《建筑地基基础设计规范》GB50007-20113、《混凝土结构设计标准》GB/T50010-2...

剪力墙水平钢筋根数如何计算?（剪力墙水平钢筋绑扎搭接规范）

剪力墙水平钢筋根数的计算需综合考虑墙高、起步距离、间距及构造要求等因素，具体步骤如下及依据：1.基本计算公式水平钢筋根数计算公式为：根数=（墙高-起步距离）/间距（墙高-起步距离）/间距...

直流电路常用计算公式（直流电路常用计算公式有哪些）

1、电阻导体阻碍电流通过的能力叫做电阻，用字母R表示，单位欧(Ω)。R=ρl/s式中R-导体的电阻，欧(Ω)；ρ-导体的电阻率，欧·米(Ω·m)；l-导体的长度，米(m)；s-导体的截面积，平方米(m...

电气主电路图的绘制特点（电气原理图主电路）

1、电气主电路图中的电气设备、元件，如电源进线、变压器、隔离开关、断路器、熔断器、避雷器等都垂直绘制，而母线则水平绘制。电气主电路图除特殊情况外，几乎无一例外地画成单线图，并以母线为核心将各个项目(如...

中考总复习:物理专题 功和机械能 (功的计算、功率、动能、势能)

中考物理专题：功与机械能解析一、力学中的功——能量转化的桥梁功是力对物体能量变化的量度，需满足两要素：作用在物体上的力、物体沿力方向移动距离。例如推箱子时，若箱子未移动，推力不做功；若箱子滑动，推力做...

40亿QQ号，不超过1G内存，如何去重?

分享一道网上很火的面试题：40亿QQ号，不超过1G的内存，如何去重？这是一个非常经典的海量数据去重问题，并且做了内存限制，最多只能1GB，本文跟大家探讨一下~~一、常规思路我们日常开发中,如果谈到去重...

填充墙体拉结筋植筋深度、孔径、拉拔试验承载力计算!

今天分享下植筋间距及保护层要求：根据JGJ145-2013混凝土后锚固技术规程要求植筋与混凝土结构边缘不应小于5mm，植筋为两根及以上时水平间距为不应小于5d（d为钢筋直径）。根据混凝土结构后锚固技...

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