百度360必应搜狗淘宝本站头条
shell 字符串比较my.cnfword空格下划线不显示applicationcontextawaremaven镜像
当前位置：网站首页 > 技术资源 > 正文

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

lipiwang 2024-12-04 13:42 8 浏览 0 评论

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>

相关推荐

linux实例之设置时区的方式有哪些

linux系统下的时间管理是一个复杂但精细的功能，而时区又是时间管理非常重要的一个辅助功能。时区解决了本地时间和UTC时间的差异，从而确保了linux系统下时间戳和时间的准确性和一致性。比如文件的时间...

Linux set命令用法（linux cp命令的用法）

Linux中的set命令用于设置或显示系统环境变量。1.设置环境变量：-setVAR=value：设置环境变量VAR的值为value。-exportVAR：将已设置的环境变量VAR导出，使其...

python环境怎么搭建?小白看完就会!简简单单

很多小伙伴安装了python不会搭建环境，看完这个你就会了Python可应用于多平台包括Linux和MacOSX。你可以通过终端窗口输入"python"命令来查看本地是否...

Linux环境下如何设置多个交叉编译工具链?

常见的Linux操作系统都可以通过包管理器安装交叉编译工具链，比如Ubuntu环境下使用如下命令安装gcc交叉编译器：sudoapt-getinstallgcc-arm-linux-gnueab...

JMeter环境变量配置技巧与注意事项

通过给JMeter配置环境变量，可以快捷的打开JMeter：打开终端。执行jmeter。配置环境变量的方法如下。Mac和Linux系统在~/.bashrc中加如下内容：export...

C/C++|头文件、源文件分开写的源起及作用

1C/C++编译模式通常，在一个C++程序中，只包含两类文件——.cpp文件和.h文件。其中，.cpp文件被称作C++源文件，里面放的都是C++的源代码；而.h文件则被称...

linux中内部变量，环境变量，用户变量的区别

unixshell的变量分类在Shell中有三种变量：内部变量,环境变量,用户变量。内部变量：系统提供，不用定义，不能修改环境变量：系统提供，不用定义，可以修改,可以利用export将用户变量转为环...

在Linux中输入一行命令后究竟发生了什么?

Linux，这个开源的操作系统巨人，以其强大的命令行界面而闻名。无论你是初学者还是经验丰富的系统管理员，理解在Linux终端输入一条命令并按下回车后发生的事情，都是掌握Linux核心的关键。从表面上看...

Nodejs安装、配置与快速入门（node. js安装）

Nodejs是现代JavaScript语言产生革命性变化的一个主要框架，它使得JavaScript从一门浏览器语言成为可以在服务器端运行、开发各种各样应用的通用语言。在不同的平台下，Nodejs的安装...

Ollama使用指南【超全版】（olaplex使用方法图解）

一、Ollama快速入门Ollama是一个用于在本地运行大型语言模型的工具，下面将介绍如何在不同操作系统上安装和使用Ollama。官网：https://ollama.comGithub：http...

linux移植（linux移植lvgl）

1uboot移植l移植linux之前需要先移植一个bootlader代码，主要用于启动linux内核，lLinux系统包括u-boot、内核、根文件系统（rootfs）l引导程序的主要作用将...

Linux日常小技巧参数优化（linux参数调优）

Linux系统参数优化可以让系统更加稳定、高效、安全，提高系统的性能和使用体验。下面列出一些常见的Linux系统参数优化示例，包括修改默认配置、网络等多方面。1.修改默认配置1.1修改默认编辑器默...

Linux系统编程—条件变量（linux 条件变量开销）

条件变量是用来等待线程而不是上锁的，条件变量通常和互斥锁一起使用。条件变量之所以要和互斥锁一起使用，主要是因为互斥锁的一个明显的特点就是它只有两种状态：锁定和非锁定，而条件变量可以通过允许线程阻塞和等...

面试题-Linux系统优化进阶学习（linux系统的优化）

一.基础必备优化:1.关闭SElinux2.FirewalldCenetOS7Iptables(C6)安全组(阿里云)3.网络管理服务||NetworkManager|network...

嵌入式Linux开发教程:Linux Shell

本章重点介绍Linux的常用操作和命令。在介绍命令之前，先对Linux的Shell进行了简单介绍，然后按照大多数用户的使用习惯，对各种操作和相关命令进行了分类介绍。对相关命令的介绍都力求通俗易懂，都给...

取消回复欢迎 你 发表评论:

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