2.12node-webkit教程(12)全屏 · NW.js中文文檔

## 目錄 * 前言 * 12.1 和全屏有關的三個api * Window.enterFullscreen() * Window.leaveFullscreen() * Window.toggleFullscreen() * 11.2 示例 * 11.3 小結 ## 前言最近node-webkit新增了fullScreen和widow notification的api，本篇文章主要簡單演示下fullScreen Api的效果。 ## 12.1 和全屏有關的三個api ### Window.enterFullscreen() 該api使整個窗口進入全屏狀態。 ### Window.leaveFullscreen() 使窗口退出全屏狀態。 ### Window.toggleFullscreen() 逆轉窗口的全屏狀態。 ## 11.2 示例新建fullscreenhtml和package.json文件。 fullscreen.html 內容如下： ~~~ <html> <head> <title>玄魂測試node-webkit 全屏api</title> <meta charset="gbk" /> </head> <body > <button id="full"> 全屏</button> <button id="exitFull">退出全屏</button> <div> </div> <script> var gui = require('nw.gui'); var win = gui.Window.get(); var fullBt = document.querySelector('#full'); fullBt.addEventListener("click", function (evt) { win.enterFullscreen(); }, false); var exitBt = document.querySelector('#exitFull'); exitBt.addEventListener("click", function (evt) { win.leaveFullscreen(); }, false); </script> </body> </html> ~~~ package.json內容如下： ~~~ { "name": "nw-demo", "main": "fullscreen.html", "nodejs":true, "window": { "title": "全屏api測試", "toolbar": true, "width": 300, "height": 200, "resizable":true, "show_in_taskbar":true, "frame":true, "kiosk":false }, "webkit":{ "plugin":true } } ~~~ 代碼很簡單，分別綁定了兩個button的事件，用來全屏和退出全屏。頁面啟動時效果如下： ![](https://wizardforcel.gitbooks.io/nwjs-doc/content/tutorial/img/061229121152201.png) 點擊全屏時效果如下： ![](https://wizardforcel.gitbooks.io/nwjs-doc/content/tutorial/img/061229165223947.png) 點擊退出全屏時效果如下： ![](https://wizardforcel.gitbooks.io/nwjs-doc/content/tutorial/img/061229213183279.jpg) ## 11.3 小結本文內容主要參考node-webkit的官方英文文檔，做了適當的調整（[https://github.com/rogerwang/node-webkit/wiki/Window）。](https://github.com/rogerwang/node-webkit/wiki/Window%EF%BC%89%E3%80%82)