为无框窗口添加边框 - Electron答案

【问题标题】：Add border to frameless window - Electron为无框窗口添加边框 - Electron
【发布时间】：2018-04-22 02:33:15
【问题描述】：

如何为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 正文的内容更小，底部边框被隐藏了一点。

那么我怎样才能让它像素完美呢？

【问题讨论】：

标签： javascript html css electron

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我知道这个问题已经得到解答，但是将 box-sizing: border-box; 放入你的 CSS 中应该可以解决它。

【讨论】：

【解决方案3】：

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

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

电子服务是这样注入的：
constructor(private _electronService: ElectronService)

模块是ngx-electron。

希望这会为某人节省一些时间:)

【讨论】：