NODE-WEBKIT教程(12)全屏

node-webkit教程(12)全屏

/玄魂

目录

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

前言... 1

12.1  和全屏有关的三个api1

Window.enterFullscreen()1

Window.leaveFullscreen()1

Window.toggleFullscreen()1

11.2  示例... 1

11.3 小结... 1

 

前言

最近node-webkit新增了fullScreenwidow notificationapi,本篇文章主要简单演示下fullScreen Api的效果。

NODE-WEBKIT教程(12)全屏

12.1  和全屏有关的三个api

Window.enterFullscreen()

api使整个窗口进入全屏状态。

Window.leaveFullscreen()

使窗口退出全屏状态。

Window.toggleFullscreen()

逆转窗口的全屏状态。

11.2  示例

新建fullscreenhtmlpackage.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教程(12)全屏

点击全屏时效果如下:

NODE-WEBKIT教程(12)全屏

点击退出全屏时效果如下:

NODE-WEBKIT教程(12)全屏

11.3 小结

本文内容主要参考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 

 

你可能感兴趣的:(webkit)