Question

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

我不希望使用原生HTML对话框（dialog）标记，因为它不会混合在＆＃39;用户界面。

非常感谢任何帮助。谢谢！

Answer 1

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

Answer 2

是的。在您的父母身上，您应该：

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

正如 Marc Rochkind 在之前的回答中所说，您可以在 Electron 中使用模态窗口。

但是，我发现模态窗口的一个小错误会导致父窗口在调用其 .show() 函数时闪烁很短的时间。在 Google 上搜索了很长时间后，我发现了一个关于相同问题的 open issue on GitHub。在阅读了问题的评论部分并偶然发现了一些代码片段后，我在问题的评论部分分享了一个 hacky solution。

设置确实需要一些工作，但是一旦完成，就可以很容易地移植到其他子窗口。

Electron中的自定义HTML对话框

3 个答案: