electron дочернее окно всегда пустое

Question

Мне необходимо создать два окна с дальнейшей коммуникацией между ними. Я застрял на создании дочернего окна: окно создается, но оно всегда пустое. Шаблон - vue-electron Создаю оба окна в main/index.js, вот полный код файла:

'use strict'

import {app, BrowserWindow, Menu} from 'electron'

/**
 * Set `__static` path to static files in production
 * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
 */
if (process.env.NODE_ENV !== 'development') {
  global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
}

let mainWindow
const winURL = process.env.NODE_ENV === 'development'
  ? `http://localhost:9080`
  : `file://${__dirname}/index.html`
let childWindow
const childWinURL = `file://${__dirname}/categoryResults.html`

async function createWindow () {
  const screen = require('electron').screen
  const display = screen.getPrimaryDisplay()
  let area = display.workArea

  mainWindow = new BrowserWindow({
    useContentSize: false,
    width: area.width,
    height: area.height,
    webPreferences: {
      webSecurity: false, // теперь можно ссылаться на локальные файлы file://
      nodeIntegration: true, // to access node feautures in "browser" code
      nodeIntegrationInWorker: true,
      // nodeIntegrationInSubFrames: true
    }
  })

  mainWindow.maximize()

  await mainWindow.loadURL(winURL)

  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

async function createChildWindow () {
  const screen = require('electron').screen
  const display = screen.getPrimaryDisplay()
  let area = display.workArea

  childWindow = new BrowserWindow({
    parent: mainWindow,
    skipTaskbar: false,
    autoHideMenuBar: true,
    useContentSize: false,
    width: area.width,
    height: area.height,
    webPreferences: {
      webSecurity: false, // теперь можно ссылаться на локальные файлы file://
      nodeIntegration: true, // to access node feautures in "browser" code
      nodeIntegrationInWorker: true
    }
  })

  await childWindow.loadURL(childWinURL)

  childWindow.on('closed', () => {
    childWindow = null
  })
}

Menu.setApplicationMenu(null)

app.on('ready', async () => {
  await createWindow()
  await createChildWindow()
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

Как видите, код создания основного и дочернего окна почти одинаковый. Я даже жду создания основного окна, прежде чем создавать дочернее. Однако основное окно получается с контентом, а дочернее - пустое. В верстке только пустой body:

Сам файл находится там же где и index.js, вот директория:

Сам html файл не пустой:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Дзюдо - результаты категории</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="background: white; overflow: hidden">
<div id="categoryResults">
  Hello world from category results
</div>
</body>

<script>
  // import Vue from 'vue'

  // alert('script tag is working')
</script>
</html>

На гитхабе я нашел старый проект с демонстрацией нескольких окон: Проект. Делаю вроде бы все так же, однако контента в дочернем окне все равно нет. Что я делаю не так?

Попробовал loadFile - ничего. Даже если childWindow.loadURL(winUrl), то окно все равно пустое. При этом никаких ошибок нет. Если вместо пути к файлу будет ссылка (https://github.com), то контент отобразится.

Answer 1

Смотри, в чём твоя ошибка:

let mainWindow
const winURL = process.env.NODE_ENV === 'development' ?
  `http://localhost:9080` :
  `file://${__dirname}/index.html`
let childWindow
const childWinURL = `file://${__dirname}/categoryResults.html`

...

async function createWindow() {

  await mainWindow.loadURL(winURL)

}

...

async function createChildWindow() {

  await childWindow.loadURL(childWinURL)

}

Если ты находишься в окружении development то winURL у тебя URL и тогда mainWindow.loadURL работает правильно, но childWinURL у тебя не URL, а путь к файлу, а это значит, что должен быть вызов childWindow.loadFile(childWinURL)

Answer 2

Я так и не смог создать второе окно из процесса main, зато смог создать из renderer.

let {remote} =require('electron')
      const BrowserWindow = remote.BrowserWindow
      let win2 = new BrowserWindow({
        parent: remote.getCurrentWindow(),
        width: 800,
        height: 600,
        webPreferences: {
          webSecurity: false
        }
      })
      await win2.loadURL('file://' + path.resolve(__dirname, '../../..', 'categoryResults.html'))

БЛОГ НА HUSL

electron дочернее окно всегда пустое

Ответы (2 шт):