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）。