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

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

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

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>

相关推荐

Python入门学习记录之一:变量_python怎么用变量

写这个，主要是对自己学习python知识的一个总结，也是加深自己的印象。变量（英文：variable），也叫标识符。在python中，变量的命名规则有以下三点：>变量名只能包含字母、数字和下划线...

python变量命名规则——来自小白的总结

python是一个动态编译类编程语言，所以程序在运行前不需要如C语言的先行编译动作，因此也只有在程序运行过程中才能发现程序的问题。基于此，python的变量就有一定的命名规范。python作为当前热门...

Python入门学习教程:第 2 章 变量与数据类型

2.1什么是变量？在编程中，变量就像一个存放数据的容器，它可以存储各种信息，并且这些信息可以被读取和修改。想象一下，变量就如同我们生活中的盒子，你可以把东西放进去，也可以随时拿出来看看，甚至可以换成...

绘制学术论文中的“三线表”具体指导

在科研过程中，大家用到最多的可能就是“三线表”。“三线表”，一般主要由三条横线构成，当然在变量名栏里也可以拆分单元格，出现更多的线。更重要的是，“三线表”也是一种数据记录规范，以“三线表”形式记录的数...

Python基础语法知识--变量和数据类型

学习Python中的变量和数据类型至关重要，因为它们构成了Python编程的基石。以下是帮助您了解Python中的变量和数据类型的分步指南：1.变量：变量在Python中用于存储数据值。它们充...

一文搞懂 Python 中的所有标点符号

反引号`无任何作用。传说Python3中它被移除是因为和单引号字符'太相似。波浪号~（按位取反符号）~被称为取反或补码运算符。它放在我们想要取反的对象前面。如果放在一个整数n...

Python变量类型和运算符_python中变量的含义

别再被小名词坑哭了：Python新手常犯的那些隐蔽错误，我用同事的真实bug拆给你看我记得有一次和同事张姐一起追查一个看似随机崩溃的脚本，最后发现罪魁祸首竟然是她把变量命名成了list。说实话...

从零开始:深入剖析 Spring Boot3 中配置文件的加载顺序

在当今的互联网软件开发领域，SpringBoot无疑是最为热门和广泛应用的框架之一。它以其强大的功能、便捷的开发体验，极大地提升了开发效率，成为众多开发者构建Web应用程序的首选。而在Spr...

Python中下划线 ‘_’ 的用法，你知道几种

Python中下划线()是一个有特殊含义和用途的符号，它可以用来表示以下几种情况：1在解释器中，下划线(_)表示上一个表达式的值，可以用来进行快速计算或测试。例如：>>>2+...

解锁Shell编程:变量_shell $变量

引言：开启Shell编程大门Shell作为用户与Linux内核之间的桥梁，为我们提供了强大的命令行交互方式。它不仅能执行简单的文件操作、进程管理，还能通过编写脚本实现复杂的自动化任务。无论是...

一文学会Python的变量命名规则!_python的变量命名有哪些要求

目录1.变量的命名原则3.内置函数尽量不要做变量4.删除变量和垃圾回收机制5.结语1.变量的命名原则①由英文字母、_(下划线)、或中文开头②变量名称只能由英文字母、数字、下画线或中文字所组成。③英文字...

更可靠的Rust-语法篇-区分语句/表达式，略览if/loop/while/for

src/main.rs://函数定义fnadd(a:i32,b:i32)->i32{a+b//末尾表达式}fnmain(){leta:i3...

C++第五课:变量的命名规则_c++中变量的命名规则

变量的命名不是想怎么起就怎么起的，而是有一套固定的规则的。具体规则：1.名字要合法：变量名必须是由字母、数字或下划线组成。例如：a，a1，a_1。2.开头不能是数字。例如：可以a1，但不能起1a。3....

Rust编程-核心篇-不安全编程_rust安全性

Unsafe的必要性Rust的所有权系统和类型系统为我们提供了强大的安全保障，但在某些情况下，我们需要突破这些限制来：与C代码交互实现底层系统编程优化性能关键代码实现某些编译器无法验证的安全操作Rus...

探秘 Python 内存管理:背后的神奇机制

在编程的世界里，内存管理就如同幕后的精密操控者，确保程序的高效运行。Python作为一种广泛使用的编程语言，其内存管理机制既巧妙又复杂，为开发者们提供了便利的同时，也展现了强大的底层控制能力。一、P...

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