本节主要讲无边框窗口。Frameless window，是没有操作系统默认样式的边框的窗口，也就意味着最大、最小和关闭按钮也访问不到，同时默认情况下窗口不能被拖拽。但你可以使用上一节的知识对无边框窗口进行操作。
无边框窗口例子：
（一）设置无边框窗口
只要你在package.json的window区域做如下参数设置，即可设置无边框窗口：
{
"window": {
"frame": false,
"toolbar": false
}
}如果打开想在无边框窗口中打开的新窗口也是无边框，则也必须做出以上参数设置：
gui = require('nw.gui');
gui.Window.open('http://google.com',{toolbar:false,frame:false});（二）使无边框窗口屏幕可拖动
默认情况下，无框窗口是不可拖拽的，可以通过给body添加“-webkit-app-region: drag”样式，来启用拖拽。如果要排除拖动区域的某些不可拖动元素，就使用“-webkit-app-region: no-drag”，目前只支持矩形形状的元素，如button。
<body style="-webkit-app-region: drag">
</body>注意，如果你把整个窗口拖动，你也必须标记按钮和自定义窗口按钮为不可拖动，否则将对用户点击它们会很辛苦：
button {
-webkit-app-region: no-drag;
}如果你只使用自定义标题栏，那么标题栏中的按钮也需要设置no-drag。
其中package.json文件如"toolbar"设为true，设置的标题栏可拖动区域将会被toolbar占据一定位置，所以在无边框中要实现标题栏可拖动最好把"toolbar"设为false。
(三)鼠标事件
一般作为可拖动区域配置的元素将不会发出如mouseenter 或 mousemove事件，这会阻止到:hover这一类的样式触发。有一个方法叫“screen”元素可以解决这个问题，它可以获取事件的初始化及冒泡事件，例子如下：
<!DOCTYPE html>
<html>
<head>
<title>windowdemo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#Controls {
-webkit-app-region: drag;
position: fixed;
top: 0;
right: 0;
left: 0;
}
.screen {
-webkit-app-region: no-drag;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#Controls:hover .screen {
display: none;
}
</style>
</head>
<body>
<div id="Controls">Btn1
<div class="screen">Btn2</div>
</div>
</body>
</html>（四）文本选择
关于无边框窗口还有一种情况时拖动行为影响到文本选择，如自制的标题栏里有文本框，拖动标题栏时会偶尔选中文本框，为了防止这种情况发生，你需要在拖动区域禁止文本框的选中功能，例子如下：
.titlebar {
-webkit-user-select: none;
-webkit-app-region: drag;
}
提醒大家一下，不要滥用拖动区域，尽量用到标题栏中，其他区域能不用则不用。
如果有用到无边框窗口，必须有关闭无边框窗口的操作，可使用函数当前窗口的window.close()。
56
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
