javascript - 为无框窗口添加边框 - Electron

Question

如何正确地为 frameless 添加边框 Electron 浏览器窗口？我的无框窗口高度是根据页面中的内容而定的，因此很难在其周围添加边框。

这就是我现在的做法:

1) 我正在给 html 添加边框:

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

2)从renderer端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 正文内容增加或减少时，我得到的高度 Electron 窗口比内容小一点。它隐藏了底部边框，我需要向上滚动才能看到该边框。如果我稍微增加高度，那么下次我会在底部边框下方留下一些空白。宽度不是问题，因为它始终是固定的。

正如您在下图中看到的，与 HTML 正文内容相比，由于 Electron 窗口尺寸较小，底部边框被隐藏了一点。

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

Answer 1

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

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