electron改变窗口大小并记录当前大小

最新推荐文章于 2025-04-21 13:51:54 发布
最新推荐文章于 2025-04-21 13:51:54 发布
阅读量1w 收藏 9
点赞数 2
文章标签： electron 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lbn2676043895/article/details/103563991
版权

在electron中寻找api，终于找到关键getContentBounds(),调用mainWindow.getContentBounds()可以获取当前窗口大小

先在主进程中设置好窗口移动的监听事件

在渲染进程中作为接收处理分发出去

最后在业务代码中通过事件的调用来获取当前窗口的宽高并保存

 

最后在electron项目的初始页面中读取数据库中的窗口大小并设置当前窗口的宽高

 

lbn2676043895
关注
Electron 应用开发实践指南 实战篇：自定义窗口的拖拽和缩放
sybh的博客
02-17 3806
默认情况，在构建的时候，会使用系统自带的原生窗口样式，比如在MacOS下的样式：在有些情况下，操作系统的原生窗口并不能符合我们的一些视觉和交互需求。所以，在使用electron创建桌面应用的时候，有时候我们希望能完全掌控窗口的样式，而隐藏掉系统提供的窗口边框和标题栏等。这个时候就需要用到自定义窗口。既然无法做到全屏拖拽移动窗口，那么有没有更好的办法呢？其实另一种方案就是自定拖拽移动，具体怎么做呢？Electron 需要拖拽的窗口的内容区域监听mousedown事件，如果是鼠标左键按下，则开启可拖拽开关。
Electron笔记
weixin_68658847的博客
10-06 787
Electron笔记
Electron窗口拖拽时窗口变大的问题的解决方案
kisamahigashi的博客
03-11 411
如何解决Electron窗口拖拽时窗口尺寸改变的问题
Electron无边框窗口（最小化、最大化、关闭、拖动）以及动态改变窗口大小
06-09
对应博客地址：https://blog.youkuaiyun.com/fukaiit/article/details/91351448 包括Electron无边框窗口原型和核心代码
Electron项目子窗口设置大小
最新发布
Holle_优快云s的博客
04-21 259
webContents.setWindowOpenHandler 这方法是监听<a>标签target="_blank"打开新窗口或者是window.open()才会触发。问题是我在vue的页面嵌套了iframe外部页面(这个页面是别人的)，点击这个页面里面的一个tab，打开了一个新的窗口。然后需要设置这个子窗口的大小。处理了一个electron+vue3项目的问题，这个项目是ElectronEgg框架的。在main.js文件按照上面设置完之后，子窗口大小就是你设置的大小了。
electron自定义标题栏，并监听双击以及右键改变窗口大小。
weixin_45892086的博客
10-08 2060
当需要在标题栏添加一些额外的操作时候，比如添加 帮助 菜单，自带的标题栏开发起来比较困难（没了解不知道能不能实现），这时候，自己写一个标题栏就比较方便。
electron 获取屏幕
两个人的幸福online
10-20 2217
注意需要在 new 之后获取。
Electron窗口尺寸
CairBin的博客
08-26 2154
与窗口尺寸有关的属性大致有这些xyshowwidthheightmaxWidthmaxHeightminWidthminHeightresizable。
electron 监听窗口高端变化
weixin_64684095的博客
10-26 748
script>console.log(`窗口高度变为：${height}`);});</script>
在Electron内嵌的独立项目中怎么实现拖拽、最大化、最小化、关闭
10-27
win.setResizable(false) // 防止在拖动过程中改变窗口大小 const { x, y } = win.getPosition() const { clientX, clientY } = event win.setPosition(x + clientX - x, y + clientY - y, true) // 更新窗口...
【Electron-playground系统】窗口篇
gcwstring的博客
10-28 1214
窗口篇 作者：Kurosaki 本文主要讲解Electron 窗口的 API 和一些在开发之中遇到的问题。 官方文档 虽然比较全面，但是要想开发一个商用级别的桌面应用必须对整个 Electron API 有较深的了解，才能应对各种需求。 1. 创建窗口 通过BrowserWindow，来 创建 或者 管理 新的浏览器窗口，每个浏览器窗口都有一个进程来管理。 1.1. 简单创建窗口 const { BrowserWindow } = require('electron'); const win = ne
electron-screen-recorder:使用Electronjs进行屏幕记录的应用
05-28
App-electron.js 如何运行？ 要运行此项目，您必须具有 installed nodejs on your PC. You need to install also Electronjs npm install electron --save 遵循以下步骤 1st Step: Extract file 2st Step : Open the folder with any IDE(VScode) 3st Step : install node module with this command << npm>> 后 ： 4th Step: open Terminal and tap npm start
无边框窗口的resize拖动实现
03-30
运行程序，你会发现窗口可以像有边框的窗口一样通过鼠标拖动来改变大小。这个MFC resize demo VS2013项目应该包含了这些修改后的源代码，你可以直接编译运行以查看效果。 在实际开发中，可能还需要处理窗口最小化、...
electron 改变窗体大小
热门推荐
一二三四吾
04-13 1万+
相关链接: electron-vue 集成 element-ui 在开发 electron 的时候遇到了需要在 render 中修改 BrowserWindow 窗口大小的方式，经过一番尝试，有两种方法实现: 通过 ipcRenderer 与 ipcMain 的通讯来实现 通过 render 的 remote 模块来实现 ipcRenderer 和 ipcMain 实现 实现原理是 rende...
【electron】监听快捷键打开新窗口
qq_45406325的博客
11-05 1172
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。
监听electron 双击屏幕最大化时设置右上角图片变化
Alive_tree的博客
09-22 2481
在electron实现窗口最大化和最小化的时候，是很简单的，只要设置主线程最大化和最小化就行了 // 主线程最大化 mainWin.maximize() //主线程非最大化 mainWin.unmaximize() // 主线程最小化 mainWin.hide() 但是在实际执行的时候，却有很多坑比如 1、你设置了 不可以双击最大化，但是只要你拖动窗口，你设置的不可以双击最大/小化 就失效了 2、如果不监听 屏幕变化，右上角的图标就不会变化，最大化后仍显示最大化图标 //设置不可最大化属性，其实没什么用
Electron 改变窗口大小 setSize失效
07-21 3758
直接 会直接看到大小变化，放在普通场景算正常，但是如果类似从登录界面切换到主界面或者从主界面切换到登陆页面，这时候直接变化大小看起来很奇怪，最好需要做点处理过渡一下。1、初始化窗口的函数 2、新建监听，用于设置窗口信息，延迟展示窗口 说明：关键代码在 ，先改成透明，然后设置大小、标题等等，然后执行最小化，最后延迟展示。注意代码顺序也会影响执行结果.........
electron如何监听屏幕亮度变化
weixin_35756892的博客
12-17 514
Electron可以通过使用screen模块来监听屏幕亮度变化。 首先，需要在你的Electron应用中安装screen模块： npminstall screen 然后，你可以在你的Electron应用的主进程中使用以下代码来监听屏幕亮度变化： const { screen } = require('electron') screen.on('display-added', function(...
获取屏幕尺寸
兰卡萧兮~
04-18 738
[UIScreen mainScreen].applicationFrame;
electron窗口大小
01-03
### 设置或修改 Electron 应用程序窗口尺寸 在创建 Electron 应用程序的过程中，可以通过 `BrowserWindow` 构造函数中的选项参数来设定应用程序窗口的初始宽度和高度。这些配置项能够帮助开发者精确控制应用界面呈现给用户的视觉效果。 对于希望调整Electron应用窗口大小的情况，主要依赖于`width` 和 `height` 属性来进行设置： ```javascript const { app, BrowserWindow } = require('electron'); let mainWindow; app.whenReady().then(() => { mainWindow = new BrowserWindow({ width: 800, height: 600 }); mainWindow.loadURL('https://example.com'); }); ``` 上述代码展示了如何通过传递对象字面量的方式，在实例化 `BrowserWindow` 类时指定窗口的具体宽高[^1]。 除了初始化阶段定义外，还可以动态改变已存在窗口的尺寸。这通常涉及到调用 `BrowserWindow` 实例上的方法如 `setSize()` 或者监听特定事件后作出响应式的调整操作。 ```javascript mainWindow.setSize(1024, 768); // 动态更改窗口大小至新的宽度和高度 ``` 此外，为了使用户体验更加友好，有时还需要考虑最小/最大化的限制条件以及是否允许用户手动调节边界等问题。此时可借助如下几个额外的关键字参数: - `minWidth`: 定义窗口能缩小到的最小宽度。 - `minHeight`: 定义窗口能缩小到的最小高度。 - `maxWidth`: 设定窗口扩增后的极限宽度。 - `maxHeight`: 设定窗口扩增后的极限高度。 - `resizable`: 控制该窗口能否被拉伸变形，默认情况下此值为 true 表示可以自由拖拽边框改变形状；如果设为 false 则不允许任何形式的手动缩放行为[^2]。 综上所述，无论是静态还是动态场景下，都提供了灵活多样的手段供开发者依据实际需求定制合适的解决方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值