如何创建模态窗口并从渲染过程中加载 HTML？答案

【问题标题】：How to create a modal window and load HTML from render process?如何创建模态窗口并从渲染过程中加载 HTML？
【发布时间】：2018-08-09 22:06:29
【问题描述】：

这是我目前的项目结构：

main.js
index.html
download.html
src/index.js
src/style.css

main.js 将创建一个 BrowserWindow 并加载 index.html，它会加载 index.js 和 style.css。

我想创建一个新的模态窗口并在单击index.html 中的按钮时加载download.html。

这是来自我的index.js的代码：

btn.onclick = function() {
  let win = new remote.BrowserWindow({
    parent: remote.getCurrentWindow(),
    modal: true
  })
  win.loadURL(`file://${__dirname}/download.html`)
}

但它正在加载file://download.html，渲染过程中不存在__dirname吗？

【问题讨论】：

发生了什么：console.log( __dirname);?
@NoGrabbing 它输出/
如果@NoGrabbing 回答了您的问题，请务必将其标记为答案。该解决方案对我来说非常有用。

标签： modal-dialog electron

【解决方案1】：

刚刚测试了这段代码（如下），它可以工作。目录结构为：

main.js
应用程序（目录）
--- index.html
--- app.js（存在以下代码）
--- modal.html

您如何访问remote？

"use strict";

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


function openModal() {
  let win = new remote.BrowserWindow({
    parent: remote.getCurrentWindow(),
    modal: true
  })

  var theUrl = 'file://' + __dirname + '/modal.html'
  console.log('url', theUrl);

  win.loadURL(theUrl);
}

【讨论】：

我和你一样访问remote
@wong2 – $ 和花括号是干什么用的？ ${__dirname} – 这是 jquery + react 的东西吗？
这是 字符串插值 ES6 特性
这么多其他方法使这变得如此复杂。天哪就这么简单。谢谢。
他们如何通过 ipcRenderer 进行通信？我无法让消息正常工作。

【解决方案2】：

使用__dirname 将给出当前文件的目录。在主进程中，它将根据文件系统进行。在渲染器进程中，它将位于浏览器的上下文中并基于访问的 uri。

您可能想改用app.getAppPath 或app.getPath(name)。

【讨论】：