ELectron 中 BrowserView 如何进行实时定位和尺寸调整

背景

BrowserView 是继 Webview 后推出来的高性能多视图管理工具，与 Webview 最大的区别是，Webview 是一个 DOM 节点，依附于主渲染进程的附属进程，Webview 节点的崩溃会导致主渲染进程的连锁反应，会引起软件的崩溃。

而 BrowserView 可以理解为比主渲染窗口更简洁的窗口，砍掉了一些窗口没必要的功能，只保留渲染视窗，且这个视窗是独立于主渲染进程的，但其所处层次和相对位置，取决于其追加进来的主渲染窗口。

代码分支

electron-demo: electron 22 初始代码开发和讲解 - Gitee.com

思想启发

什么叫代理？代理何时会用？在这个场景中就出现了一种必然概念，被代理者并不能直接参与当前操作中的环节，但是它又时时刻刻参与到操作中来，此时，采用代理的方式，将必要参数实时传递给被代理者，就达到了无缝增强的概念，例如，一个谋士非常厉害，但因犯了罪不能当官，若想继续实现自己才能，则需要一个当官的能实时与他实时通信，保持执行策略的通畅，当官的和谋士就是必不可缺的一对组合。

被代理者无法直接融入到操作环境中来，但是被代理者的表现方式又与操作环境密不可分

BrowserView 与 Webview 的差异比较

BrowserView相比WebView有几个显著优势：

性能更好 BrowserView使用独立的渲染进程，不需要像WebView那样在主窗口中嵌入，避免了额外的渲染开销。WebView本质上是一个DOM元素，会增加主窗口的渲染负担。

更灵活的布局控制 BrowserView可以通过setBounds()方法精确控制位置和大小，支持动态调整。而WebView受限于CSS布局，在复杂场景下布局控制较为受限。

更好的进程隔离 BrowserView运行在完全独立的渲染进程中，崩溃时不会影响主窗口。WebView虽然也有进程隔离，但与主窗口的耦合度更高。

资源消耗更低 BrowserView不需要额外的DOM操作和CSS渲染，内存占用通常更小。特别是在需要多个Web视图的场景下，差异更明显。

更现代的API设计 BrowserView的API更加简洁和现代化，避免了WebView中的一些历史包袱和兼容性问题。

更好的安全性由于完全独立的进程和更严格的沙箱机制，BrowserView在安全性方面表现更好。

最麻烦的 BrowserView 定位问题

BrowserView 有很多优势，但是作为独立的渲染单位，定位和宽高完全适配就成了很大的问题，但是从源码 Franz 中我们得到了启发，那就是代理机制，让一个 div 占据这个区域，采用响应式布局时，监听该 div 的相对主窗口的定位和宽高变化，然后再将这个参数，实时发送给 BrowserView，BrowserView 就可以实现实时定位了

实现效果录屏

实现代码

main/index.js 代码和 renderer/App.vue 代码

最核心的就是 ResizeObserver 对象，可以实时监听中间的 div 的偏移和宽高，父容器偏移那个是 0,0，不应该有那块逻辑，AI 生成的，我也懒得删，没有影响

主渲染使用Vue脚手架开发的，所以给的Vue脚手架下的组件代码App.vue

// main 主进程代码

const { app, BrowserWindow, BrowserView, ipcMain } = require('electron');
const path = require('path');

let mainWindow;
let browserView;

const winURL = process.env.NODE_ENV === 'development'
    ? `http://localhost:9080`
    : `file://${__dirname}/index.html`

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 1000,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'renderer.js'),
            nodeIntegration: true,
            contextIsolation: false, // 简化示例，禁用上下文隔离
        },
    });

    mainWindow.loadURL(winURL);

    browserView = new BrowserView();
    mainWindow.setBrowserView(browserView);
    browserView.setBounds({ x: 200, y: 0, width: 600, height: 600 }); // 初始值
    browserView.webContents.loadURL('https://web.whatsapp.com');

    ipcMain.on('update-center-div', (event, { x, y, width, height }) => {
        console.log(`Received center div bounds: x=${x}, y=${y}, width=${width}, height=${height}`);
        browserView.setBounds({
            x: Math.round(x),
            y: Math.round(y),
            width: Math.round(width),
            height: Math.round(height),
        });
    });

    mainWindow.on('closed', () => {
        mainWindow = null;
        browserView = null;
    });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (mainWindow === null) {
        createWindow();
    }
});

App.vue 全部代码

// renderer 进程的 App.vue 代码
<template>
  <div class="container">
    <div id="left" class="panel" ref="leftPanel" :style="{ width: leftWidthStyle }">
      <div class="content">左侧内容</div>
    </div>
    <div class="resize-handle" @mousedown="startDragging('left', $event)"></div>
    <div id="center" class="panel" ref="center">
    </div>
    <div class="resize-handle" @mousedown="startDragging('right', $event)"></div>
    <div id="right" class="panel" ref="rightPanel" :style="{ width: rightWidthStyle }">
      <div class="content">右侧内容</div>
    </div>
    <div id="info" v-if="width > 0 || height > 0">
      中心div相对于父容器偏移: ({{ offsetX.toFixed(2) }}, {{ offsetY.toFixed(2) }}) px<br>
      宽度: {{ width.toFixed(2) }} px<br>
      高度: {{ height.toFixed(2) }} px
    </div>
  </div>
</template>

<script>
// Assuming ipcRenderer is correctly set up (e.g., via preload script or nodeIntegration:true)
const { ipcRenderer } = require('electron'); // Or window.electronAPI if using contextBridge

export default {
  name: 'App',
  data() {
    return {
      // Use null or a specific initial value like 'auto' if you prefer,
      // then handle it in computed. Here, 0 will mean 'auto' initially.
      actualLeftWidth: 0, // Store the numeric width in pixels
      actualRightWidth: 0, // Store the numeric width in pixels

      isDragging: null,    // 'left' or 'right'
      startX: 0,           // Mouse X position at drag start
      startPanelDragWidth: 0, // Width of the panel being dragged at drag start

      offsetX: 0,
      offsetY: 0,
      width: 0,
      height: 0,
      resizeObserver: null,
    };
  },
  computed: {
    leftWidthStyle() {
      // If actualLeftWidth is 0, treat it as 'auto' to let content define it initially.
      // Otherwise, use the pixel value.
      return this.actualLeftWidth > 0 ? `${this.actualLeftWidth}px` : 'auto';
    },
    rightWidthStyle() {
      return this.actualRightWidth > 0 ? `${this.actualRightWidth}px` : 'auto';
    }
  },
  methods: {
    initializePanelWidths() {
      // $nextTick ensures the DOM is updated and refs are available.
      this.$nextTick(() => {
        if (this.$refs.leftPanel) {
          // If 'auto' (actualLeftWidth is 0), set actualLeftWidth to its rendered content width.
          if (this.actualLeftWidth === 0) {
            this.actualLeftWidth = this.$refs.leftPanel.clientWidth;
          }
        } else {
          console.warn("Ref 'leftPanel' not found during initialization.");
        }

        if (this.$refs.rightPanel) {
          if (this.actualRightWidth === 0) {
            this.actualRightWidth = this.$refs.rightPanel.clientWidth;
          }
        } else {
          console.warn("Ref 'rightPanel' not found during initialization.");
        }
        // Update center div info after initial widths are potentially set
        this.updateCenterDivInfo();
      });
    },

    startDragging(side, event) {
      if (!event) return;
      this.isDragging = side;
      this.startX = event.clientX;

      let targetPanelRef;
      if (side === 'left') {
        targetPanelRef = this.$refs.leftPanel;
        if (!targetPanelRef) {
          console.error("Left panel ref not found for dragging.");
          return;
        }
        // Get the current rendered width as the starting point for dragging
        this.startPanelDragWidth = targetPanelRef.clientWidth;
        // If the panel's width was 'auto' (actualLeftWidth is 0),
        // set actualLeftWidth to its current clientWidth so drag calculations have a numeric base.
        if (this.actualLeftWidth === 0) this.actualLeftWidth = this.startPanelDragWidth;

      } else if (side === 'right') {
        targetPanelRef = this.$refs.rightPanel;
        if (!targetPanelRef) {
          console.error("Right panel ref not found for dragging.");
          return;
        }
        this.startPanelDragWidth = targetPanelRef.clientWidth;
        if (this.actualRightWidth === 0) this.actualRightWidth = this.startPanelDragWidth;
      }

      document.addEventListener('mousemove', this.onMouseMove);
      document.addEventListener('mouseup', this.stopDragging);
      document.body.style.userSelect = 'none'; // Prevent text selection globally
    },

    onMouseMove(event) {
      if (!this.isDragging) return;
      event.preventDefault();

      const deltaX = event.clientX - this.startX;
      let newWidth;

      if (this.isDragging === 'left') {
        newWidth = this.startPanelDragWidth + deltaX;
        this.actualLeftWidth = Math.max(50, Math.min(newWidth, 400)); // Apply constraints
      } else if (this.isDragging === 'right') {
        newWidth = this.startPanelDragWidth - deltaX; // Subtract delta for right panel
        this.actualRightWidth = Math.max(50, Math.min(newWidth, 400));
      }
      // The ResizeObserver on #center will trigger updateCenterDivInfo
    },

    stopDragging() {
      if (!this.isDragging) return;
      this.isDragging = null;
      document.removeEventListener('mousemove', this.onMouseMove);
      document.removeEventListener('mouseup', this.stopDragging);
      document.body.style.userSelect = ''; // Re-enable text selection
    },

    updateCenterDivInfo() {
      const centerEl = this.$refs.center;
      if (centerEl && centerEl.parentElement) {
        const rect = centerEl.getBoundingClientRect();
        const parentRect = centerEl.parentElement.getBoundingClientRect();

        this.offsetX = rect.left - parentRect.left;
        this.offsetY = rect.top - parentRect.top;
        this.width = rect.width;
        this.height = rect.height; // This will be 100% of parent due to CSS if parent has height

        if (ipcRenderer && typeof ipcRenderer.send === 'function') {
          ipcRenderer.send('update-center-div', {
            x: this.offsetX,
            y: this.offsetY,
            width: this.width,
            height: this.height,
          });
        }
      }
    },
  },
  mounted() {
    this.initializePanelWidths(); // This will use $nextTick

    if (this.$refs.center) {
      this.resizeObserver = new ResizeObserver(() => {
        this.updateCenterDivInfo();
      });
      this.resizeObserver.observe(this.$refs.center);
    } else {
      // Fallback if center ref isn't immediately available (less likely for direct refs)
      this.$nextTick(() => {
        if (this.$refs.center) {
          this.resizeObserver = new ResizeObserver(() => {
            this.updateCenterDivInfo();
          });
          this.resizeObserver.observe(this.$refs.center);
          this.updateCenterDivInfo(); // Call once if observer set up late
        } else {
          console.error("Center panel ref ('center') not found on mount for ResizeObserver.");
        }
      });
    }
    window.addEventListener('resize', this.updateCenterDivInfo);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateCenterDivInfo);
    if (this.resizeObserver) {
      if (this.$refs.center) { // Check if ref still exists before unobserving
        this.resizeObserver.unobserve(this.$refs.center);
      }
      this.resizeObserver.disconnect();
    }
    // Clean up global listeners if component is destroyed mid-drag
    document.removeEventListener('mousemove', this.onMouseMove);
    document.removeEventListener('mouseup', this.stopDragging);
    document.body.style.userSelect = '';
  },
};
</script>

<style>
/* For 100% height to work all the way up */
html, body, #app { /* Assuming #app is your Vue mount point */
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Often good for the root to prevent unexpected scrollbars */
}

.container {
  display: flex;
  width: 100%;
  height: 100%; /* Will fill its parent (e.g., #app) */
  position: relative; /* For #info positioning */
  background-color: #f0f0f0; /* Light grey background for the container itself */
}

.panel {
  height: 100%; /* Panels will fill the .container's height */
  overflow: auto; /* Add scrollbars if content overflows */
  box-sizing: border-box; /* Includes padding and border in the element's total width and height */
}

#left {
  background: #ffdddd; /* Lighter Red */
  /* width: auto; initially, will be set by content or actualLeftWidth */
}

#center {
  flex: 1; /* Takes up remaining space */
  background: #e0e0e0; /* Light grey for center, instead of transparent */
  min-width: 50px; /* Prevent center from collapsing too much */
  display: flex; /* If you want to align content within the center panel */
  flex-direction: column;
  /* border-left: 1px solid #ccc;
  border-right: 1px solid #ccc; */
}

#right {
  background: #ddffdd; /* Lighter Green */
  /* width: auto; initially, will be set by content or actualRightWidth */
}

.resize-handle {
  width: 6px; /* Slightly wider for easier grabbing */
  background: #b0b0b0; /* Darker grey for handle */
  cursor: ew-resize;
  flex-shrink: 0; /* Prevent handles from shrinking if container space is tight */
  user-select: none; /* Prevent text selection on the handle itself */
  z-index: 10;
  display: flex; /* To center an icon or visual cue if you add one */
  align-items: center;
  justify-content: center;
}
/* Optional: add a visual indicator to the handle */
/* .resize-handle::before {
  content: '⋮';
  color: #fff;
  font-size: 12px;
  line-height: 0;
} */


#info {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.95);
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 3px;
  z-index: 1000;
  border: 1px solid #d0d0d0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  font-family: monospace;
}

.content {
  padding: 15px; /* More padding */
  white-space: nowrap; /* This makes clientWidth reflect this content */
  min-height: 50px; /* Example */
  color: #333;
}
</style>