如何创建一个模态窗口并从渲染进程加载HTML？

Question

这是我的当前项目结构：

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 吗？

- wong2

---

console.log(__dirname);会发生什么？ - spring

@NoGrabbing 它输出 /。 - wong2

如果@NoGrabbing回答了你的问题，请务必将其标记为答案。那个解决方案对我非常有效。 - Slbox

Answer 1

刚测试了下面的代码，它可以工作。目录结构如下：

 

main.js
     app（目录）
     --- 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);
}

- spring

---

我正在像你一样访问“远程”。 - wong2

@wong2 - $和花括号是干嘛的？${__dirname} - 这是jQuery + React的东西吗？ - spring

很多其他的方法让这个看起来非常复杂。天啊，这真的很简单。谢谢。 - Slbox

他们如何通过ipcRenderer进行通信？我无法使消息正常工作。 - Ivan

电子中模态框的目的是什么？看起来模态框已经像应用程序加载了“index.html”一样正常加载到应用程序中了？ - oldboy

Answer 2

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

您可能想要使用app.getAppPath或app.getPath(name)来代替。

- Steve Buzonas