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

# node-webkit教程(12)全屏 > 作者：玄魂 > 來源：[node-webkit教程(12)全屏](http://www.cnblogs.com/xuanhun/p/3894272.html) ## 目錄 + 前言 + 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的事件，用來全屏和退出全屏。頁面啟動時效果如下： ![](img/061229121152201.png) 點擊全屏時效果如下： ![](img/061229165223947.png) 點擊退出全屏時效果如下： ![](img/061229213183279.jpg) ## 11.3 小結本文內容主要參考node-webkit的官方英文文檔，做了適當的調整（https://github.com/rogerwang/node-webkit/wiki/Window）。