Electron 中的自定义 HTML 对话框

Question

如何（或者甚至可能）在 Electron 中使用自定义 HTML 对话框？我知道 Electron 提供了某些对话框（showMessageDialog、showErrorDialog），但这些似乎不允许自定义 HTML.

我不想使用本机 HTML 对话框 (dialog) 标签，因为它不 'blend in' 与用户界面。

如有任何帮助，我们将不胜感激。谢谢！

Answer 1

您可以创建一个有模式的 BrowserWindow，如果您愿意，还可以创建无框架的。参见 http://electron.atom.io/docs/api/browser-window/。

Answer 2

是的。在你的 parent 上你应该有：

const { remote } = require('electron');
const { BrowserWindow } = require('electron').remote;

然后：

let child = new BrowserWindow({
        parent: remote.getCurrentWindow(), 
        modal: true, 
        width:300, height:300,
        webPreferences: {
            enableRemoteModule: true,
            nodeIntegration: true
        }
    });
child.loadFile('myCustomModal.html');

在 myCustomModal.html 记得包含一种关闭模式的方法！喜欢：

<button id="cancel-btn">Cancel</button>
<script>
 const remote = require('electron').remote;

  document.getElementById("cancel-btn").addEventListener("click", function (e) {
       var window = remote.getCurrentWindow();
       window.close();
  });   

</script>

Answer 3

正如在之前的回答中所说，你可以在Electron中使用模态windows。

然而，我发现模态 windows 的一个小错误导致 parent window 在其 .show() 函数被调用时闪烁很短的持续时间.在 Google 上花了很长时间后，我在问题的评论部分找到了一个 open issue on GitHub about the same problem. After reading the comment section in the issue, and stumbling across some code snippets, I shared a hacky solution。

设置确实需要一些工作，但是一旦设置完成，就很容易移植到其他 child windows.

Electron 中的自定义 HTML 对话框

Custom HTML Dialog in Electron

html

dialog

electron