Question

我需要创建两个窗口，并进行进一步的窗口间通信。但是现在我被困在创建那个子窗口上：该窗口正在创建中，但是没有内容。在devTools中，我仅看到body标签。我使用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, 
      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, 
      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()
  }
})

如您所见，创建主窗口和创建子窗口几乎相同。但是mainWindow有它的内容，而childWindow没有。在devTools HTML内，我看到空的<body>：

这两个文件位于同一目录中：

html文件本身不为空：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Judo - category results</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>

在Github上，我发现了一个带有多窗口演示的旧项目。 Project好像我做同样的事情，但是子窗口仍然没有内容。我究竟做错了什么？请帮助...

电子子窗口始终为空

0 个答案: