nw.js node-webkit系列（5）Native UI API Window的使用

矫情吗；* 2021-09-10 19:56 697阅读 0赞

本节主要介绍Native UI API中Window的基本使用方法。简单的说，Window就是使用nwjs开发的应用程序在桌面显示的容器（窗口）。node-webkit >= v0.3.0才支持Window API，Window是在DOM Window的基础上进行封装，它扩展了DOM Window的操作，同时可以接收各类的窗口事件。每一个window都继承 了node.js中的 EventEmitter 对象，你可以使用Window.on(...)的方式监听native window的事件。

# （一）Window Demo #

<!DOCTYPE html>
    <html>
    	<head>
    		<title>windowdemo</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	</head>
    	<body>
    		<h1>window api 测试</h1>
    		<script>
    			// Load native UI library
    			var gui = require('nw.gui');
    			// Get the current window
    			var win = gui.Window.get();
    			// Listen to the minimize event
    			win.on('minimize', function() {
    				var element = document.createElement('div');
    				element.appendChild(document.createTextNode('窗口最小化'));
    				document.body.appendChild(element);
    				//Unlisten the minimize event
    				win.removeAllListeners('minimize');
    			});
    			// Minimize the window
    			win.minimize();
    			// Create a new window and get it
    			var new_win = gui.Window.open('http://www.baidu.com', {
    				position: 'center',
    				width: 901,
    				height: 127,
    				focus: true
    			});
    			// And listen to new window's focus event
    			new_win.on('focus', function() {
    				var element = document.createElement('div');
    				element.appendChild(document.createTextNode('新窗口被激活'));
    				document.body.appendChild(element);
    			});
    		</script>
    	</body>
    </html>

这段程序比较简单，主要是通过gui.Window.get()获取窗口控制权，再通过  对象"."  的方式对窗口进行监听或操作。如若需要打开新窗口，则用open(url，\{options\})方法，该方法下面会做详细介绍。

# （二）Window 函数参考 #

**get(\[window\_object\])**

如果window\_object不指定，则返回当前窗口的窗口对象，否则返回window\_object的窗口对象。

// Get the current window
    var win = gui.Window.get();

**open(url，\{options\})**

打开一个新窗口并初始化url，你还可以额外配置这个新窗口的属性，你必须等待窗口加载事件完成后才能对其进行操作。在新的node-webkit版本里，默认情况下新打开的窗口是没有被激活的（未获取焦点）,如果想默认获取焦点，可以在在配置中设置“focus”属性为true。

var win = gui.Window.open ('https://github.com', {
      position: 'center',
      width: 901,
      height: 127,
      focus: true
    });
    win.on ('loaded', function(){
      // the native onload event has just occurred
      var document = win.window.document;
    });

**Window.window**

获取当前DOM文档中的Window对象

var gui = require('nw.gui');
    var win = gui.Window.get();
    if (win.window == window)//比较是否为DOM window
    {
      var element = document.createElement('div');
      element.appendChild(document.createTextNode('Window.window 和DOM window对象相同'));
      document.body.appendChild(element);
    }

**Window.x/Window.y**  
获取或设置窗口在左上角的点在屏幕中的位置

var gui = require('nw.gui');
    var win = gui.Window.get();
    win.x = 0;
    win.y = 0;

**Window.width/Window.height**

获取或设置窗口的尺寸

**Window.title**

获取或设置窗口的标题

**Window.menu**

获取或设置窗口的菜单栏，会在《Native UI API Menu的使用》一节详细介绍

**Window.isFullscreen**

获取或设置窗口是否全屏，在package.json配置文件中也可设置

**Window.isTransparent**

获取窗口透明度是否打开（我也没搞清楚）

**Window.isKioskMode**

获取或设置Kiosk模式（Kiosk模式可参照博主第三篇中package.json配置参数中有介绍）

**Window.zoomLevel**

获取或者设置窗体内页面的zoom值。正值代表zoom in，负值代表zoom out。

**Window.moveTo(x, y)**

以窗口的左上角为中心点移动窗口到指定位置。

**Window.moveBy(x, y)**

以窗口当前位置为（0,0）点移动窗口到指定位置。

**Window.resizeTo(width, height)**

重新设置窗口大小

**Window.resizeBy(width, height)**

以当前窗口大小为基准，重新增加指定值到窗口的宽高。

**Window.focus()**

使窗口获取焦点。

**Window.blur()**

使窗口失去焦点。

**Window.show()**

显示隐藏的窗口。在某些平台上，show方法并不会使窗口获取焦点，如果你想在窗口显示的同时使其获取焦点，需要调用focus方法。  
 show(false)和Window.hide()方法效果一样。

**Window.hide()**

隐藏窗口，如果窗口已经隐藏，用户将没办法找到该窗口

**Window.close(\[force\])**

关闭窗体。可以通过监听close事件，阻止窗口关闭。但是如果force=true，将会忽略close事件的监听程序。  
一般情况下，我们会在程序中先监听close事件，在事件处理函数中做一些基本工作再关闭窗口。如：

<span style="font-size:14px;">win.on('close', function() {
      this.hide(); // Pretend to be closed already
      console.log("We're closing...");
      this.close(true);
    });
    
    win.close();</span>

**Window.reload()**

重新加载窗口

**Window.reloadIgnoringCache()**

重新加载窗体，强制刷新缓存。

**Window.maximize()**

使窗口最大化

**Window.minimize()**

使窗口最小化

**Window.restore()**

恢复窗口到上一状态。

**Window.enterFullscreen()**

使窗口进入全屏模式。这和html5的FullScreen API不同，html5可以使页面的一部分全屏，该方法只能使整个窗口全屏。

**Window.leaveFullscreen()**

退出全屏模式。

**Window.toggleFullscreen()**

切换全屏模式

**Window.enterKioskMode()**

进入Kiosk模式。Kiosk模式使应用全屏，并且阻止用户退出。所以在该模式下必须提供退出Kiosk模式的途径。

**Window.leaveKioskMode()**

退出Kiosk模式。

**Window.toggleKioskMode()**

切换Kiosk模式。

**Window.setTransparent(transparent)**

是否允许设置透明度。

**Window.showDevTools(\[id | iframe, headless\])**

在窗口中打开开发者工具。

详情 参见：https://github.com/rogerwang/node-webkit/wiki/Devtools-jail-feature

**Window.closeDevTools()**

关闭开发者工具。

**Window.isDevToolsOpen()**

检查开发者工具是否打开，返回开发者工具是否被打开的状态信息。

**Window.setMaximumSize(width, height)**

设置窗口的最大值。

**Window.setMinimumSize(width, height)**

设置窗口的最小值。

**Window.setResizable(Boolean resizable)**

设置窗口是否可以重设大小。

**Window.setAlwaysOnTop(Boolean top)**

设置窗口是否总在最前端。

**Window.setVisibleOnAllWorkspaces(Boolean)**

因为平台支持在多个系统显示，如 Mac OS X 和 Linux。设置窗口是否支持所有系统显示。

**Window.canSetVisibleOnAllWorkspaces()**

检查窗口显示是否支持当前环境。

**Window.setPosition(String position)**

移动窗体到指定位置。目前只有“center”支持所有平台，将窗口移动到屏幕中央。

**Window.setShowInTaskbar(Boolean show)**

设置是否允许在任务栏显示图标。

**Window.requestAttention(Boolean attention)**

是否需要身份验证。ture时需要用户对显示窗口进行验证操作，false时则不需要，最终的行为取决于平台。

**Window.capturePage(callback \{image\_format | config\_object \}** )

捕捉窗口的可见区域，即截图功能。

callback代表回调函数，如

function(dataUrl) {...};

image\_format代表图片的格式，config\_object代表数据的格式。

默认情况下，format值为jpeg，datatype为datauri。如

{ 
     format : "[jpeg|png]", 
     datatype : "[raw|buffer|datauri]" 
    }

实际的应用模板如下：

// png as base64string
    win.capturePage(function(base64string){
     // do something with the base64string
    }, { format : 'png', datatype : 'raw'} );
    
    // png as node buffer
    win.capturePage(function(buffer){
     // do something with the buffer
    }, { format : 'png', datatype : 'buffer'} );

例子：

<html>
    	<head>
    		<title>windowdemo</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	</head>
    	<body style="background: #333">
    		<h1>window 测试</h1>
    		<script>
    			var gui = require('nw.gui');
    			        var win = gui.Window.get();
    			        function takeSnapshot() {
    			            WIN.CAPTUREPAGE(FUNCTION (IMG) {
    			                VAR BASE64DATA = IMG.REPLACE(/^DATA:IMAGE\/(PNG|JPG|JPEG);BASE64,/, "");
    			                REQUIRE("FS").WRITEFILE("OUT.PNG", BASE64DATA, 'BASE64', FUNCTION (ERR) {
    			                    CONSOLE.LOG(ERR);
    			                });
    			            }, 'PNG');
    			        }
    		</script>
    		<div style="background: #123; width:100px; height:100px; border:1px solid #000"></div>
    		<button οnclick="takeSnapshot()">截图</button>
    	</body>
    </html>

**Window.cookies.\***

包含一些列处理cookie的方法。这些api的定义方式和chrome扩展相同。node-webkit支持get, getAll, remove 和 set 方法; onChanged 事件 (该事件支持支持 both addListener 和 removeListener 方法)。  
 和CookieStore有关的扩展api不被支持，因为node-webkit只有一个全局的cookie存储。

**Window.eval(frame, script)**

在目标window或者iframe中执行javascript代码段。script参数是要执行的javascript代码。

# （三）Window 事件参考 #

**close**

关闭窗口事件。参考上文window.close()方法。

**closed**

窗口关闭完毕事件。正常情况下在同一窗体内是无法监听此事件的，以为窗口已经关闭，所有javascript 对象都被释放掉了。  
但是我们可以通过在另一窗口，监听被关闭窗口的已关闭事件。如：

**loading**

窗口正在初始化时的事件，该事件只能在刷新窗口或者在其他窗口中监听。

**loaded**

窗口初始化完毕。

**document-start**