node-webkit教程(12)全屏

文/玄魂

目录

node-webkit教程(12)全屏

前言

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

页面启动时效果如下：

点击全屏时效果如下：

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

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

NODE-WEBKIT教程(12)全屏的更多相关文章

  1. Adobe Flex迷你教程 —Flex4全屏显示

    应用场景 1.播放器 我们经常看视频的时候,需要全屏显示,(在flex中这个视频初始化的时候是嵌入到html的iframe中). 2.监控 如下图所示,大多时候我们的监控用的是flex,而树形菜单和标 ...

  2. Node入门教程(12)第十章：Node的HTTP模块

    Ryan Dahl开发node的初衷就是:把Nginx非阻塞IO功能和一个高度封装的WEB服务器结合在一起的东东.所以Node初衷就是为了高性能的Web服务器去的,所以:Node的HTTP模块也是核心 ...

  3. Directx11教程(12) 禁止alt+enter全屏窗口

    原文:Directx11教程(12) 禁止alt+enter全屏窗口        在D3D11应用程序中,我们按下alt+enter键,会切换到全屏模式.有时候,我们在WM_SIZE中有一些代码,全 ...

  4. [整理]Node入门 » 一本全面的Node.js教程 - Demo实践所遇到的问题

    花了一个上午看完[转载]Node入门 » 一本全面的Node.js教程 根据里面的Demo自己手动实现过程中还是遇到了些问题,特整理在此. <1>.由于node.msi安装包已经自动添加了 ...

  5. 虚拟机VMWare安装苹果系统MacOS详细教程（联网设置，全屏插件、文件互传）

    运行环境: VMware® Workstation 12 Pro(自行安装,或者用这个) 推荐(下面以10.11.6版本做的教程,但是安装时推荐使用此版本安装然后升级到10.11.6):MacOS X ...

  6. NeHe OpenGL教程 第四十六课：全屏反走样

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  7. Win10玩魔兽争霸不能全屏显示的设置教程

    Win10玩魔兽争霸不能全屏显示的设置教程: 1.右击桌面左下角的windows图标,显示图片内容,然后点击运行: 2.点击运行,有个输入框,输入regedit,点击确认: 3.显示win10注册表, ...

  8. jquery.fullPage.js全屏滚动插件教程演示

    css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...

  9. 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇07：全屏炸弹》

    7.全屏炸弹 全屏炸弹概述: 为了增设游戏的趣味性,我们制作一个游戏的基本框架以外.还会增设一些其他的额外的功能.比如5秒无敌状态.冰冻效果等.下面咱们以消灭屏幕中所有炸弹为例,看除了碰撞可以触发事件 ...

随机推荐

  1. iOS 解析json串

    NSString *json = @"[{\"name\":\"a1\",\"items\":[{\"x1\" ...

  2. {vlFeat}{Matlab}Linux中matlab的vlFeat配置

    1.下载vlFeat编译后的版本binary package 2.解压后将 toolbox/,bin/,data/ 等文件夹复制到matlab新建工具箱目录 /toolbox/vlfeat/ 中 3. ...

  3. Linux_09------Linux上系统扫描和安全策略

    先谢慕课网/** * linux系统扫描技术 * * 主机扫描.路由扫描.批量服务扫描.系统安全策略(防SYN和ddos攻击) */ /** * 主机扫描 * ping fping hping * * ...

  4. Spring HtmlUtils把HTML编码转义，可将HTML标签互相转义

    Spring HtmlUtils把HTML编码转义,可将HTML标签互相转义 2014年09月05日 ⁄ 综合 ⁄ 共 372字 ⁄ 字号 小 中 大 ⁄ 评论关闭   org.springframe ...

  5. 基于WebView的混合编程

    近日公司需求变更,以前一个页面是后台返回HTML字段,然后我们直接用webView接收,现在新增一个页面,数据后台返回非HTML,页面跟前面一直,所幸自己会点HTML,所以偷了个懒,自己用代码把数据组 ...

  6. navicat for mysql

    下载地址:https://www.navicat.com/cht/download 详情:http://baike.baidu.com/link?url=zo3CUg3HC5XUHkz4YqXO6Em ...

  7. 《机器学习实战》学习笔记——第14章 利用SVD简化数据

    一. SVD 1. 基本概念: (1)定义:提取信息的方法:奇异值分解Singular Value Decomposition(SVD) (2)优点:简化数据, 去除噪声,提高算法的结果 (3)缺点: ...

  8. texstudio on ubuntu 12.04

    从官网下载针对12.04的版本的texstudio: http://texstudio.sourceforge.net/ 安装deb包:sudo dpkg -i texstudio_xx.deb 运行 ...

  9. 第二次作业#include <stdio.h> int main() { int a,b,c,d,e; printf("请输入一个不多于五位的整数：\n"); scanf("%d",&a); if(a>=100000||a<=0) { printf("输入格式错误！ \n"); } else { if(

    1 判断成绩等级 给定一百分制成绩,要求输出成绩的等级.90以上为A,80-89为B,70-79为C,60-69为D,60分以下为E,输入大于100或小于0时输出"输入数据错误". ...

  10. python 小知识

    PYTHONPATH是Python搜索路径,默认我们import的模块都会从PYTHONPATH里面寻找. 使用下面的代码可以打印PYTHONPATH: print(os.sys.path) impr ...