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.οnmοusedοwn= 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.οnmοusemοve=function (e) {

??????????? if (!dragging) return

??????????? win.x = win_x + (e.screenX - mouse_x)

??????????? win.y = win_y + (e.screenY - mouse_y)

??????? };

??????? $win.οnmοuseup=function () {

??????????? dragging = false

??????? };

?

??? </script>

拖拽前窗口在左上角。

拖拽后。

?

ok，是不是完美的解決問題了呢？

nw.js，electron交流群 313717550。

所有文章會在本人的博客玄魂 - 博客園?和個人公眾號 “xuanhun521”?http://t.cn/R4OCglP?‘’微博http://weibo.com/xuanhun?，知乎專欄http://zhuanlan.zhihu.com/xuanhun?進行同步，歡迎關注。

轉載于:https://www.cnblogs.com/xuanhun/p/5134010.html

總結

以上是生活随笔為你收集整理的nw.js FrameLess Window下的窗口拖拽与窗口大小控制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。