electron隐藏状态栏后的拖拽方法

最新推荐文章于 2025-03-29 08:30:00 发布

扎扎小成

最新推荐文章于 2025-03-29 08:30:00 发布

阅读量1.9k

点赞数 2

分类专栏：前端 javascript 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_41271393/article/details/104571970

版权

前端同时被 2 个专栏收录

13 篇文章

订阅专栏

javascript

8 篇文章

订阅专栏

electron隐藏状态栏

1、设置了{frame:false}或{titleBarStyle: 'hidden'}都可以达到隐藏标题栏的效果。
但是若果不做处理，就不能进行拖动了。

main.js

const { app, BrowserWindow } = require('electron')
function createWindow () {   
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    },
    backgroundColor:'#ff0',
    frame: false //隐藏标题栏
  })
  win.loadFile('index.html')
  win.webContents.openDevTools()
}

app.on('ready',() => {
  createWindow()
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body{
      -webkit-app-region: drag
    }

    input {
      -webkit-app-region: no-drag;
    }
  
  </style>
</head>
<body>
  <h1>Hello World！</h1>
  <h2>你好</h2>
  <input value="你好"/>
</body>
</html>

解释：这里给body添加-webkit-app-region: drag属性，整个窗口就能够拖动，但是会带来新的bug,input输入框不能选中输入文字，button按钮不能添加点击事件等。所以需要给这些按钮添加-webkit-app-region: no-drag;属性，才能恢复正常。

方法二

结合windows自带的mousemove事件，还有electron的getPosition方法获取窗口当前位置，通过setPosition设置窗口位置。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* body{
      -webkit-app-region: drag
    }

    input {
      -webkit-app-region: no-drag;
    }
   */
  </style>
</head>
<body>
  <h1>Hello World！</h1>
  <h2>你好</h2>
  <input value="你好"/>
</body>

<script>
function makeDraggable(element) {
  element = document.querySelector(element);
  let dragging = false;
  let mouseX = 0;
  let mouseY = 0;
  element.addEventListener('mousedown', (e) => {
  dragging = true;
  const { pageX, pageY } = e;
  mouseX = pageX;
  mouseY = pageY;
  });
  window.addEventListener('mouseup', () => {
  dragging = false;
  });
  window.addEventListener('mousemove', (e) => {
  if (dragging) {
  const { pageX, pageY } = e;
  const win = require('electron').remote.getCurrentWindow();
  const pos = win.getPosition();
  pos[0] = pos[0] + pageX - mouseX;
  pos[1] = pos[1] + pageY - mouseY;
  win.setPosition(pos[0], pos[1], true);
  }
  });
  }
  makeDraggable('body')

</script>
</html>