NODE-WEBKIT教程(12)全屏

時間 2019-11-13

標籤 node webkit 教程全屏简体版

原文原文鏈接

node-webkit教程(12)全屏

文/玄魂html

目錄node

node-webkit教程(12)全屏... 1ios

前言... 1git

12.1 和全屏有關的三個api1github

Window.enterFullscreen()1web

Window.leaveFullscreen()1json

Window.toggleFullscreen()1api

11.2 示例... 1app

11.3 小結... 1electron

前言

最近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>

</head>

<body >

<div>

</div>

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的事件，用來全屏和退出全屏。

頁面啓動時效果以下：

點擊全屏時效果以下：

點擊退出全屏時效果以下：

11.3 小結

本文內容主要參考node-webkit的官方英文文檔，作了適當的調整（https://github.com/rogerwang/node-webkit/wiki/Window）。

鄙視不標明出處的轉載，更多相關內容，歡迎訪問玄魂的博客（www.xuanhun521.com）

ps：nw.js，electron交流羣 313717550

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。