electron 监听窗口高端变化

一、在主进程中监听窗口大小变化

1. 使用 `BrowserWindow` 的实例方法

在主进程中,可以获取窗口实例并添加 `resize` 事件监听器。

javascript 复制代码
const { BrowserWindow } = require("electron");



const win = BrowserWindow.getFocusedWindow();

if (win) {

  win.on("resize", () => {

    const { height } = win.getBounds();

    console.log(`窗口高度变为:${height}`);

  });

}

二、在渲染进程中监听窗口大小变化

1. 使用 `ipcRenderer` 与主进程通信

在渲染进程中,可以使用 `ipcRenderer` 发送消息给主进程,让主进程监听窗口大小变化并将结果发送回渲染进程。

1.1 首先在渲染进程中引入 `ipcRenderer`

javascript 复制代码
<script>

  const { ipcRenderer } = require("electron");



  ipcRenderer.send("start-watch-window-size");

</script>

1.2 然后在主进程中监听来自渲染进程的消息并添加窗口大小变化监听器

javascript 复制代码
const { ipcMain, BrowserWindow } = require("electron");



ipcMain.on("start-watch-window-size", () => {

  const win = BrowserWindow.getFocusedWindow();

  if (win) {

    win.on("resize", () => {

      const { height } = win.getBounds();

      win.webContents.send("window-size-changed", height);

    });

  }

});

1.3 最后在渲染进程中接收主进程发送的窗口高度变化消息

javascript 复制代码
<script>

  const { ipcRenderer } = require("electron");



  ipcRenderer.on("window-size-changed", (event, height) => {

    console.log(`窗口高度变为:${height}`);

  });

</script>
相关推荐
qiyue779 分钟前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
轻语呢喃13 分钟前
React智能前端:从零开始的识图学单词项目(一)
javascript·react.js·aigc
断竿散人13 分钟前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
Danny_FD15 分钟前
Vue2 + Vuex 实现页面跳转时的状态监听与处理
前端
小飞悟16 分钟前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计
安思派Anspire16 分钟前
LangGraph + MCP + Ollama:构建强大代理 AI 的关键(一)
前端·深度学习·架构
LRH17 分钟前
JS基础 - 基于 Generator + Promise 实现 async/await 原理
前端·javascript
Jolyne_18 分钟前
可配置永久生效的Table组件的封装过程
前端·react.js
自由逐风18 分钟前
前端小数点精度问题解析
javascript
断竿散人18 分钟前
JavaScript 异常捕获完全指南(上):从同步异步到 Promise 错误处理
前端·javascript·promise