文/玄魂
目錄
最近node-webkit新增了fullScreen和widow notification的api，本篇文章主要簡單演示下fullScreen Api的效果。
該api使整個窗口進入全屏狀態。
使窗口退出全屏狀態。
逆轉窗口的全屏狀態。
新建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的事件，用來全屏和退出全屏。
頁面啟動時效果如下：
點擊全屏時效果如下：
點擊退出全屏時效果如下：
本文內容主要參考node-webkit的官方英文文檔，做了適當的調整（https://github.com/rogerwang/node-webkit/wiki/Window）。
鄙視不標明出處的轉載，更多相關內容，歡迎訪問玄魂的博客（www.xuanhun521.com）
更多相關內容，歡迎訪問玄魂的博客(更多node-webkit相關內容 http://www.xuanhun521.com/Blog/Tag/node-webkit)
ps：nw.js，electron交流群 313717550