nw.js node-webkit系列（5）Native UI API Window的使用
阿新 • • 發佈：2019-01-27
本節主要介紹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
這段程式比較簡單，主要是通過gui.Window.get()獲取視窗控制權，再通過 物件"." 的方式對視窗進行監聽或操作。如若需要開啟新視窗，則用open(url，{options})方法，該方法下面會做詳細介紹。<!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>
（二）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 onclick="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 物件都被釋放掉了。
但是我們可以通過在另一視窗，監聽被關閉視窗的已關閉事件。如：
<script>
var gui = require('nw.gui');
var new_win = gui.Window.open('http://www.baidu.com', {
position: 'center',
width: 901,
height: 127,
focus: true
});
new_win.on('closed', function () {
var element = document.createElement('div');
element.appendChild(document.createTextNode('新視窗已經關閉'));
document.body.appendChild(element);
});
</script> 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中開啟連結