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

本节主要介绍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

	
		
		
	
	
		
window api 测试
		
	

这段程序比较简单，主要是通过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事件，在事件处理函数中做一些基本工作再关闭窗口。如：

win.on('close', function() {
  this.hide(); // Pretend to be closed already
  console.log("We're closing...");
  this.close(true);
});

win.close();

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'} );

例子：

	
		
		
	
	
		
window 测试
		
		

		截图
	

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

窗体中的document对象或者iframe中的css文件都加载完毕，DOM元素还未开始渲染，javascript代码还未执行，触发此事件。
监听事件的函数会接收一个frame参数，值为具体的iframe对象或者为null。

document-end

文档加载完毕触发的事件。

监听事件的函数会接收一个frame参数，值为具体的iframe对象或者为null。

focus

获取焦点的事件

blur

失去焦点的事件。

minimize

窗口最小化事件。

restore

当窗口从最小化重置到上一状态时触发的事件。

maximize

窗口最大化事件。

unmaximize

窗口从最大化状态重置到之前的状态时触发的事件。

move

窗口被移动后引发的事件。
事件处理函数应该接收两个参数(x,y)，是窗口的新位置。

resize

窗体大小被重置时触发的事件。
事件监听的回调函数接收两个参数(width,height)，窗口的新大小。

enter-fullscreen

窗口进入全屏模式时触发的事件。

leave-fullscreen

退出全屏模式时触发的事件。

zoom

当窗体中文档发生zooming时触发的事件，带有zoomlevel参数，参见上文的window.zoom属性。

capturepagedone

截图完毕触发的事件，事件的传递参数参考上文Window.capturePage函数的回调函数的参数定义。

devtools-opened

开发者工具被打开触发的事件。
事件的回调函数接收一个url参数，是打开开发者工具的窗口地址。

devtools-closed

开发者工具被关闭时触发的事件。

new-win-policy

当一个新窗口被从当前窗口打开，或者打开一个iframe时触发该事件。

function (frame, url, policy) {}

frame 发起请求的子iframe，如果从顶层窗口中发起的请求，该值为null

url 请求的地址

policy 带有以下方法的对象：

ignore() : 忽略请求。

forceCurrent() :强制在同一frame中打开链接

forceDownload() : 强制链接被下载或者在其他应用中打开

forceNewWindow() : 强制在新窗口中打开链接

forceNewPopup() : 强制在新的 popup window中打开链接