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

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

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

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>

相关推荐

JavaScript做个贪吃蛇小游戏(过关-加速)，无需网络直接玩。

JavaScript做个贪吃蛇小游戏（过关-则加速）在浏览器打开文件，无需网络直接玩。<!DOCTYPEhtml><htmllang="en"><...

大模型部署加速方法简单总结（大模型 ai）

以下对大模型部署、压缩、加速的方法做一个简单总结，为后续需要备查。llama.cppGithub:https://github.com/ggerganov/llama.cppLLaMA.cpp项...

安徽医大第一医院应用VitaFlow Liberty(R)Flex为患者焕然一“心”

近日，在安徽医科大学第一附属医院心血管内科负责人暨北京安贞医院安徽医院业务副院长喻荣辉教授的鼎力支持和卓越带领下，凭借着先进的VitaFlowLiberty(R)Flex经导管主动脉瓣可回收可...

300 多行代码搞定微信 8.0 的「炸」「裂」特效!

微信8.0更新的一大特色就是支持动画表情，如果发送的消息只有一个内置的表情图标，这个表情会有一段简单的动画，一些特殊的表情还有全屏特效，例如烟花表情有全屏放烟花的特效，炸弹表情有爆炸动画并且消息和...

让div填充屏幕剩余高度的方法（div填充20px）

技术背景在前端开发中，经常会遇到需要让某个div元素填充屏幕剩余高度的需求，比如创建具有固定头部和底部，中间内容区域自适应填充剩余空间的布局。随着CSS技术的发展，有多种方法可以实现这一需求。实现步骤...

css之div内容居中（css中div怎么居中）

div中的内容居中显示，包括水平和垂直2个方向。<html><head><styletype="text/css">...

使用uniapp开发小程序遇到的一些问题及解决方法

1、swiper组件自定义知识点swiper组件的指示点默认是圆圈，想要自己设置指示点，需要获得当前索引，然后赋给当前索引不同的样式，然后在做个动画就可以了。*关键点用change方法，然后通过e.d...

微信小程序主页面排版（怎样设置小程序的排版）

开发小程序的话首先要了解里面的每个文件的作用小程序没有DOM对象，一切基于组件化小程序的四个重要的文件*.js*.wxml--->view结构---->html*.wxss--...

Vue动态组件的实践与原理探究（vue动态组件component原理）

我司有一个工作台搭建产品，允许通过拖拽小部件的方式来搭建一个工作台页面，平台内置了一些常用小部件，另外也允许自行开发小部件上传使用，本文会从实践的角度来介绍其实现原理。ps.本文项目使用VueCLI...

【HarmonyOS Next之旅】兼容JS的类Web开发(四) -＞ tabs

目录1->创建Tabs2->设置Tabs方向3->设置样式4->显示页签索引5->场景示例编辑1->创建Tabs在pages/index目录...

CSS:前端必会的flex布局，我把布局代码全部展示出来了

进入我的主页，查看更多CSS的分享！首先呢，先去看文档，了解flex是什么，这里不做赘述。当然，可以看下面的代码示例，辅助你理解。一、row将子元素在水平方向进行布局：1.垂直方向靠顶部，水平方向靠...

【HarmonyOS Next之旅】兼容JS的类Web开发(四) -＞ swiper

目录1->创建Swiper组件2->添加属性3->设置样式4->绑定事件5->场景示例编辑1->创建Swiper组件在pages/index...

CSS:Flex布局，网页排版神器!（css3 flex布局）

还在为网页排版抓狂？别担心，CSS的flex布局来了，让你轻松玩转各种页面布局，实现网页设计自由！什么是Flex布局？Flex布局，也称为弹性布局，是CSS中的一种强大布局方式，它能够让你...

移动WEB开发之flex布局，附携程网首页案例制作

一、flex布局体验传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局1.1flex弹性布局：操作方便，布局极为简单，移动端应用很广泛PC端浏览器支持情况较差IE11或更低版本，不支持或仅部...

2024最新升级–前端内功修炼 5大主流布局系统进阶(mk分享)

2024最新升级–前端内功修炼5大主流布局系统进阶(mk分享)获课》789it.top/14658/前端布局是网页设计中至关重要的一环，它决定了网页的结构和元素的排列方式。随着前端技术的不断发展，现...

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