使用Electron，我如何使BrowserWindow中的BrowserView可拖动？

pjngdqdw 于 8个月前发布在 Electron

关注(0)|答案(2)|浏览(125)

我想在我的主BrowserWindow中嵌入一个BrowserView，可以在BrowserWindow的范围内拖动。然而，当我使用css -webkit-app-region: drag时，拖动BrowserView实际上会移动整个BrowserWindow。我如何才能实现我的目标？
下面是一个复制设置：
src/main.js：

import * as path from 'path';
import { app, BrowserView, BrowserWindow } from 'electron';
    
const baseDir = app.getAppPath()
   
app.on("ready", async () => {
    
    const mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: true,
        },
        frame: false
    });
    
    mainWindow.setMenu(null);
    mainWindow.maximize();
    mainWindow.on('closed', () => app.quit())
    mainWindow.loadFile(path.join(baseDir, "src/main.html"));
   
    const view = new BrowserView({
        webPreferences: {
            sandbox: false,
            nodeIntegration: false,
            contextIsolation: true,
        },
    })
    view.webContents.loadFile(path.join(baseDir, 'src/window.html'));
    view.setBounds({
        x: 200,
        y: 200,
        width: 1000,
        height: 500,
    })
    
    mainWindow.addBrowserView(view);
});

字符串
网址：http：//www.china.com

<!DOCTYPE html>
    
<html>
    
<head>
    <title>Test</title>
    <link rel="stylesheet" href="style.css">
</head>
    
<body style="background-color: #666;"></body>
    
</html>

型
src/window.html：

<!DOCTYPE html>
    
<html>
   
<head>
    <title>Embeded</title>
    <link rel="stylesheet" href="style.css">
</head>
   
<body class="dragWindow" style="background-color: #888;"></body>
    
</html>

型
src/style.css：

html {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
  
    -webkit-app-region: no-drag;
}
    
body {
    height: 100%;
    width: 100%;
    margin: 0;
}
    
.dragWindow {
    -webkit-app-region: drag; 
    -webkit-user-select: none; 
    user-select: none;
}

型
编辑：我尝试使用脚本将拖动事件从BrowserView传递到main process，并将BrowserView从main process移动，但结果是，在工作时，超级慢，我认为是由于进程之间的通信滞后。当移动鼠标太快时，它只是退出BrowserView和拖动停止，而停留在“拖动”状态。我会更喜欢如果一个电子本机解决方案存在。

electron

来源：https://stackoverflow.com/questions/77265573/using-electron-how-can-i-make-a-browserview-within-a-browserwindow-draggable

2条答案

按热度按时间

ltskdhd11#

我想你可能会在本期中找到一些很酷的信息：https://github.com/electron/electron/issues/32751#issuecomment-1030484112
他们谈到了电子公开的私有API，你可能会找到解决方案。
此外，该问题的作者正试图找到一个类似的解决方案，以便对BrowserView中的事件/输入做出React。

赞(0）回复(0）举报 8个月前

b1zrtrql2#

尝试：

import * as path from 'path';
import { app, BrowserView, BrowserWindow, ipcMain } from 'electron';

const baseDir = app.getAppPath();

app.on('ready', async () => {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: true,
    },
    frame: false,
  });

  mainWindow.setMenu(null);
  mainWindow.maximize();
  mainWindow.on('closed', () => app.quit());
  mainWindow.loadFile(path.join(baseDir, 'src/main.html'));

  const view = new BrowserView({
    webPreferences: {
      sandbox: false,
      nodeIntegration: false,
      contextIsolation: true,
    },
  });

  view.webContents.loadFile(path.join(baseDir, 'src/window.html'));
  view.setBounds({
    x: 200,
    y: 200,
    width: 1000,
    height: 500,
  });

  mainWindow.addBrowserView(view);

  let isDragging = false; // Track the dragging state
  let initialMouseX, initialMouseY; // Track the initial mouse position
  let initialViewX, initialViewY; // Track the initial view position

  ipcMain.on('start-drag', () => {
    isDragging = true;
  });

  ipcMain.on('stop-drag', () => {
    isDragging = false;
  });

  ipcMain.on('drag', (event, { deltaX, deltaY }) => {
    if (isDragging) {
      // Calculate the new view position based on mouse movement
      const newX = initialViewX + deltaX;
      const newY = initialViewY + deltaY;
      view.setBounds({ x: newX, y: newY, width: 1000, height: 500 });
    }
  });

  view.webContents.on('dom-ready', () => {
    view.webContents.insertCSS(`
      .dragWindow {
        -webkit-app-region: no-drag;
      }
    `);

    view.webContents.executeJavaScript(`
      let isDragging = false;
      let startX, startY;

      document.querySelector('.dragWindow').addEventListener('mousedown', (e) => {
        isDragging = true;
        startX = e.clientX;
        startY = e.clientY;
        ipcRenderer.send('start-drag');
      });

      document.addEventListener('mousemove', (e) => {
        if (isDragging) {
          const deltaX = e.clientX - startX;
          const deltaY = e.clientY - startY;
          ipcRenderer.send('drag', { deltaX, deltaY });
          startX = e.clientX;
          startY = e.clientY;
        }
      });

      document.addEventListener('mouseup', () => {
        isDragging = false;
        ipcRenderer.send('stop-drag');
      });
    `);
  });
});

字符串

赞(0）回复(0）举报 8个月前

我来回答

使用Electron，我如何使BrowserWindow中的BrowserView可拖动？

2条答案

相关问题

热门标签

最新问答