Electron 中的自定义 HTML 对话框答案

【问题标题】：Custom HTML Dialog in ElectronElectron 中的自定义 HTML 对话框
【发布时间】：2017-01-03 08:25:38
【问题描述】：

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

我不希望使用原生 HTML 对话框 (dialog) 标记，因为它不会“融入”用户界面。

任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： html dialog electron

【解决方案1】：

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

【讨论】：

我可以从 BrowserWindows 的主进程生成窗口吗？
是的。可以从主进程创建窗口（对话框）。在渲染器进程中，你可以用 window.open 做同样的事情。请参阅文档：electron.atom.io/docs。您需要的一切都在那里。
Electron中模态窗口的问题是调用.show()函数时会出现短暂的闪烁。实际上有一个关于这个问题的open issue on GitHub，我分享了一个我发现的hacky solution。

【解决方案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>

【讨论】：

【解决方案3】：

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

但是，我发现了一个模式窗口的小错误，它会导致父窗口在其.show() 函数被调用时闪烁很短的时间。在谷歌上呆了一段时间后，我发现了一个open issue on GitHub 也有同样的问题。在阅读了问题的评论部分并偶然发现了一些代码 sn-ps 后，我在问题的评论部分分享了@987654323@。

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

【讨论】：