electron - BrowserView呈现在BrowserWindow的折叠下方

Question

遇到一个非常奇怪的怪癖，无法弄清楚我在做什么错:
init.js

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

let win = null;

// Init function
const init = function() {
    return new Promise((resolve, reject) => {

        try {

            // BrowserWindow config
            const config = {
                backgroundColor: '#1d1e20',
                show: false,
                webPreferences: {
                    contextIsolation: true,
                    enableRemoteModule: false,
                    preload: path.join(__dirname, 'preload.js'),
                }
            };

            // Make BrowserWindow frameless (win) or hide titlebar (mac)
            if ('win32' === os.platform()) {
                config.frame = false;
            } else if ('darwin' === os.platform()) {
                config.titleBarStyle = 'hidden';
            }

            // Create BrowserWindow
            win = new BrowserWindow(config);

            // Add listener for BrowserWindow 'ready-to-show' event
            win.once('ready-to-show', () => {

                // Set traffic light position (mac)
                win.setTrafficLightPosition({ x: 10, y: 27 });

                // Show browser window
                win.show();

                // Open DevTools
                win.openDevTools({ mode: "detach" });

                resolve();

            });

            // Load app html
            win.loadFile('./app.html').then(() => {
                // loaded
            }).catch((err) => {
                reject(err);
            });

        } catch (err) {
            reject(err);
        }
    });
};

// Add browser view
const addView = function(url) {
    return new Promise((resolve, reject) => {

        try {

            // Get window size
            const bounds = win.getSize();

            // Create BrowserView
            const view = new BrowserView({
                backgroundColor: "#ffffff",
                webPreferences: {
                    contextIsolation: true,
                    enableRemoteModule: false,
                    //preload: path.join(__dirname, 'preload.js'),
                }
            });

            view.setBounds({
                height: 375,
                width: 375,
                x: 0,

                // Set "y" coordinate to 0
                // (should be relative to BrowserWindow 0, 0)
                y: 0

                // Set "y" coordinate to a
                // negative integer
                //y: -200

                // Instead, set "y" to inverse of
                // BrowserWindow height
                //y: bounds[1] * -1
            });

            // Load file
            view.webContents.loadFile('./new.html').then(() => {
                
                // Add to BrowserWindow
                win.addBrowserView(view);
                
                // Open DevTools
                view.webContents.openDevTools({ mode: "detach" });

                resolve();

            }).catch((err) => {
                reject(err);
            });

        } catch (err) {
            reject(err);
        }

    });
};

// init when ready
app.whenReady().then(() => {
    init().then(() => {
        addView().then(() => {
            console.log("Everything should be working right");
        }).catch((err) => {
            console.log("Error loading BrowserView");
            console.error(err);
        });
    }).catch((err) => {
        console.log("Error loading BrowserWindow");
        console.error(err);
    });
});

预期结果:将新的BrowserView以已定义的宽度和高度(位于0、0处)正方形地堆叠在BrowserWindow的顶部。
实际结果:新的BrowserView显示在折叠下方，其“y”坐标相对于BrowserWindow的底部。若要使BrowserView显示在BrowserWindow 0，0，必须将BrowserView“y”坐标设置为(BrowserWindowHeight * -1)

编辑:PS
package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "init.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "",
  "devDependencies": {
    "electron": "^12.0.1"
  }
}

preload.js

(no contents)

app.html

(no contents)

app.js

(no contents)

app.css

(no contents)

new.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <style>
        html {
            margin: 0;
            padding: 0;
        }
        body {
            background: #ffffff;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

更新＃1
通过在view.loadURL()的promise回调内部移动来延迟对view.setBounds()的调用。没变化。
更新＃2
通过以1000ms的延迟另外包装setTimeout()来进一步延迟对view.setBounds()的调用。没变化。
更新＃3
通过添加以下内容，BrowserView确实会对齐以纠正父浏览器窗口中的0、0位置，但仅在发生resize事件时:

win.on('will-resize', (event, newBounds) => {
    win.getBrowserViews().forEach((view) => {
        view.setBounds({
            height: newBounds.height,
            width: newBounds.width,
            x: 0,
            y: 0
        });
    });
});

更新＃4
分别使用google.com和stackoverflow.com用.loadURL()替换了BrowserWindow.loadFile()和BrowserView.loadFile()调用，从而消除了与本地文件有关的可能性。没变化。
更新＃5
通过如下修改 init.js ，它可以按预期工作，但是它并不像它“快速捕捉”到位。 (编辑:为澄清起见，我用固定背景定义了BrowserView，除非我以某种方式误解了backgroundColor属性的用途，否则我希望在.loadURL()完成之前显示该 View )(编辑:我刚刚意识到backgroundColor不是BrowserView的有效属性)

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

let win = null;

// Init function
const init = function() {
    return new Promise((resolve, reject) => {

        try {

            // BrowserWindow config
            const config = {
                backgroundColor: '#1d1e20',
                show: false,
                webPreferences: {
                    contextIsolation: true,
                    enableRemoteModule: false,
                    preload: path.join(__dirname, 'preload.js'),
                }
            };

            // Make BrowserWindow frameless (win) or hide titlebar (mac)
            if ('win32' === os.platform()) {
                config.frame = false;
            } else if ('darwin' === os.platform()) {
                config.titleBarStyle = 'hidden';
            }

            // Create BrowserWindow
            win = new BrowserWindow(config);

            // Add listener for BrowserWindow 'ready-to-show' event
            win.once('ready-to-show', () => {

                // Set traffic light position (mac)
                win.setTrafficLightPosition({ x: 10, y: 27 });

                // Show browser window
                win.show();

                // Open DevTools
                win.openDevTools({ mode: "detach" });

            });

            // Add listener for BrowserWindow 'show' event
            win.once('show', () => {
                resolve();
            });

            win.on('will-resize', (event, newBounds) => {
                win.getBrowserViews().forEach((view) => {
                    view.setBounds({ height: newBounds.height, width: newBounds.width, x: 0, y: 0 });
                });
            });

            // Load app html
            win.loadURL("https://google.com").then(() => {
                // loaded
            }).catch((err) => {
                reject(err);
            });

        } catch (err) {
            reject(err);
        }
    });
};

// Add browser view
const addView = function(url) {
    return new Promise((resolve, reject) => {

        try {

            // Create BrowserView
            const view = new BrowserView({
                backgroundColor: "#edeef0",
                webPreferences: {
                    contextIsolation: true,
                    enableRemoteModule: false
                }
            });

            // Load file
            view.webContents.loadURL('https://stackoverflow.com').then(() => {

                setTimeout(() => {
                    
                    // Get window size
                    const bounds = win.getSize();
                    
                    // Set BrowserView bounds
                    view.setBounds({ height: bounds[1], width: bounds[0], x: 0, y: 0 });

                }, 1);
                
                // Add to BrowserWindow
                win.addBrowserView(view);
                
                // Open DevTools
                view.webContents.openDevTools({ mode: "detach" });

                resolve();

            }).catch((err) => {
                reject(err);
            });

        } catch (err) {
            reject(err);
        }

    });
};

// init when ready
app.whenReady().then(() => {
    init().then(() => {
        addView().then(() => {
            console.log("Everything should be working right");
        }).catch((err) => {
            console.log("Error loading BrowserView");
            console.error(err);
        });
    }).catch((err) => {
        console.log("Error loading BrowserWindow");
        console.error(err);
    });
});

更新＃6
我得出的结论是，在当前版本的Electron(12.0.1)中，使用等效于CSS position: relative呈现了BrowserView，但是此后几乎立即更改为等效于CSS position: absolute。创建BrowserView后立即调用BrowserView.setBounds({x:0，y:0})，该BrowserView实际上显示在{x:0，y:(BrowserWindow height)}上，而调用BrowserView.setBounds({x:延迟1毫秒后，在setTimeout()中的0，y:0})中，BrowserView实际上显示为{x:0，y:0}。我不确定为什么会这样，但是似乎该修复程序(仅在macOS 10.14.6上进行了测试)如下:

const view = new BrowserView(...);
const size = win.getSize();
view.setBounds({ height: size[1], width: size[0], x: 0, y: size[0] * -1 });

并且，在BrowserWindow上:

win.on('will-resize', (event, newBounds) => {
    win.getBrowserViews().forEach((view) => {
        view.setBounds({ height: newBounds.height, width: newBounds.width, x: 0, y: 0 });
    });
});

更新＃7
这仍然感觉很笨拙，我怀疑这不是预期的行为，而且我可能仍在做错事。我将保留这个问题，希望有人能提供比我发现的更好的解决方案。
更新＃8
最终发现这是我的草率实现。在完成RTFM之后，添加一些 promise 并按正确的顺序执行操作，就没有问题了。
出于教育目的，我将其分解并颠倒了寻找问题根源的步骤，因此我知道以供将来引用。对于可能会发现此问题并遇到相同问题的其他人，您必须先调用BrowserWindow.addBrowserView()，然后再调用BrowserView.setBounds()。那就是问题所在。
创建BrowserView之后，我立即调用BrowserView.setBounds()，这时尚未将其添加到BrowserWindow中，因此为什么关闭了坐标。在解决BrowserView.loadFile()之前，我没有调用BrowserWindow.addBrowserView()。

Answer 1

必须在调用BrowserView.setBounds()之前调用BrowserWindow.addBrowserView()-(请参阅更新＃8)