向无框窗口添加边框 - 电子

Question

如何正确添加边框到frameless电子浏览器窗口？ 我的无框窗口高度取决于页面中的内容，这使得难以在其周围添加边框。

这就是我现在正在做的事情：

1）我将边框添加到html：

html{
    border-style: solid;
    border-color: slategray;
    border-width: 5px;
}

2）从渲染器侧js计算窗口的高度：

let pageHeight = ( $('body').outerHeight(true));
    $('html').height(Math.ceil(pageHeight));
    let margin = 9;
    let electronWindowHt = Math.ceil(pageHeight)+margin;
    ipcRenderer.send('dom-ready-command',electronWindowHt);

3）从主js设置窗口的大小：

ipc.on('dom-ready-command', (event, height) => {
    clipboardWindow.setSize(config.WIDTH, height, false);
clipboardWindow.setPosition(clipwin_x, clipwin_y, false);
// other code
.
.
.
    })

问题是不是像素完美。有时它工作正常，但有时当html体内容量增加或减少时，我的高度电子窗口比内容要小一些。它隐藏了底部边框，我需要向上滚动才能看到边框。如果我稍微增加高度，那么下次我在底部边框下面留下一些空白区域。宽度不是问题，因为它总是固定的。

正如您在下图所示，由于与HTML正文的内容相比电子窗口尺寸较小，因此底部边框会隐藏一点。

那我怎样才能让像素变得完美呢？

Answer 1

我的扔石头堂兄将clipboardWindow.setSize(config.WIDTH, Math.ceil(height), false);放在ipc.on('dom-ready-command')事件的最后一行。

奇怪的是，它修正了高度不正确的问题。现在它的像素完美

Answer 2

我知道这已经得到了解答，但是在你的CSS中添加box-sizing: border-box;应该可以修复它。

Answer 3

我使用Angular 10显示无框窗口。我确定渲染器进程中窗口大小的唯一方法是通过以下方式使用electronService：

this._electronService['_electron'].webFrame.context

以这种方式注入电子服务：
constructor(private _electronService: ElectronService)

模块是ngx-electron。

希望这可以为某些人节省几个小时：）