How to create a modal window and load HTML from render process?

Question

this is my current project structure:

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

main.js will create a BrowserWindow and load index.html, which loads index.js and style.css.

I'd like to create a new modal window and load download.html when a button is clicked in index.html.

here is codes from my index.js:

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

but it's loading file://download.html, isn't __dirname existed in render process?

Answer 1

Just tested this code (below) and it works. Directory structure is:

main.js
app (directory)
--- index.html
--- app.js (where the code below exists)
--- modal.html

How are you accessing 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);
}

Answer 2

Using __dirname will give the directory of the current file. In the main process it will be according to the filesystem. In a renderer process it will be in the context of the browser and be based on the accessed uri.

You likely want to use app.getAppPath or app.getPath(name) instead.