nw.js FrameLess Window下的窗口拖拽與窗口大小控制
nw.js FrameLess Window 下的窗口拖拽與窗口大小控制
很多時候，我們覺得系統的 Frame 框很難看，于是想自定義。
自定義 Frame 的第一步是在 package.config 文件中將 frame 選項設置為 false 。
{
"name" : "1" ,
"main" : "index.html" ,
"nodejs" : true ,
"single-instance" : false ,
"chromium-args" : "--enable-webgl --ignore-gpu-blacklist" ,
"window" : {
"show" : true ,
"title" : "AxeSlide" ,
"toolbar" : true ,
"width" :1000,
"height" :400,
"resizable" : true ,
"show_in_taskbar" : true ,
"frame" : false ,
"kiosk" : false ,
"icon" : "resources/img/axeslide.png" ,
"position" : "center"
},
"webkit" :{
"plugin" : true
}
}
修改配置文件之后，我們看到的是下面的窗口。
無 frame 窗口是沒有辦法進行拖拽的，這肯定很不爽了，下面我們可以添加下面的樣式到 body 上，實現整個窗口的拖動。
body {
-webkit-app-region : drag ;
}
到此，我們的無邊框窗體已經建成了，拖拽窗口的問題已經解決了，一切似乎完美了，就這么簡單。不過當我們 “ 手賤 ” 地去雙擊下窗口的時候，窗口自動最大化了。其實這是 nw.js 優化過后的一個功能，在早期版本的時候，無邊框窗口，雙擊是沒有任何反應的，很多用戶提了 bug ，作者于是添加了這個功能。但是不是任何時候，我們都需要最大化的，比如自定義了一個登錄窗，我們想保持固定的大小怎么辦？
我首先想到的是監聽 Click 事件，如下：
document.onclick = function (e) {
e.preventDefault();
}
添加之后呢，然而并沒有卵用，現在已經確認是 nw.js 的一個 bug ，據說在 0.13 版本修復了，不過還處于 beta 階段。
一招不行，再來一招，可不可以通過設置最大，最小寬高都一樣的方式解決呢？
繼續修改配置文件。
此時我們再次測試，發現雙擊之后確實沒有最大化了，不過窗口的位置卻偏移到了屏幕的左上角。
這當然也不是我們需要的，那么就沒辦法處理了嗎？既然默認的處理方式不行，自己動手豐衣足食吧，捕獲 Click 和 MouseMove 事件，自己實現拖拽也不是很困難的，說干就干。先去掉原來用于 body 上執行拖拽的樣式，然后添加下面的代碼。
< script >
var gui = require( 'nw.gui' )
var win = gui.Window.get()
var $win = window
var $nav = document.body;
var dragging = false
var mouse_x, mouse_y
var win_x, win_y;
$nav.onmousedown= function (e) {
e = e.originalEvent || e
var isbg = $(e.target).closest( '.navbar-nav, #form-user' ).length < 1
if (!isbg) return
dragging = true
mouse_x = e.screenX
mouse_y = e.screenY
win_x = win.x
win_y = win.y
};
$win.onmousemove= function (e) {
if (!dragging) return
win.x = win_x + (e.screenX - mouse_x)
win.y = win_y + (e.screenY - mouse_y)
};
$win.onmouseup= function () {
dragging = false
};
</ script >
拖拽前窗口在左上角。
拖拽后。
ok ，是不是完美的解決問題了呢？
nw.js ， electron 交流群 313717550 。
所有文章會在本人的博客 玄魂 - 博客園 和個人公眾號 “xuanhun521” http:// t.cn/R4OCglP ‘’ 微博 http:// weibo.com/xuanhun ，知乎專欄 http://zhuanlan.zhihu.com/xuanhun 進行同步，歡迎關注。
</div> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>