Electron 应用程序在启动时打开所有页面答案

【问题标题】：Electron app opening all pages upon startupElectron 应用程序在启动时打开所有页面
【发布时间】：2019-11-07 14:01:43
【问题描述】：

我正在设置一个多页电子应用程序，但是每当我启动我的应用程序时，它会打开所有页面，并且每当我单击应该将用户带到下一页的按钮时，它都会向前跳过并打开其他页面也是如此。

我认为问题在于设置每个窗口的父/子关系，但是在评论或删除这些属性时问题仍然存在。

const{app, BrowserWindow, ipcMain} = require('electron');
import{fstat} from 'fs';
import{resolve} from 'path';

const packagejson = require('../package.json')

app.commandLine.appendSwitch('touch-events', 'enabled'); 

if (require('electron-squirrel-startup')) { 
  app.quit();
}

let mainWindow;
let startWindow;
let setOriginsWindow;

const createWindow = () => {
  startWindow = new BrowserWindow({
    width: 800,
    height: 600,
  });

  startWindow.loadURL(`file://${__dirname}/index.html`);

  startWindow.webContents.openDevTools();

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

app.on('ready', createWindow);

ipcMain.on('set-origins', (event) => {
  setOriginsWindow = new BrowserWindow({
  })
  setOriginsWindow.on('close', function() {setOriginsWindow = null});
  setOriginsWindow.loadURL(`file://${__dirname}/set_origin_page.html`)
  setOriginsWindow.once('ready-to-show', () => {
    setOriginsWindow.show();
  });
  setOriginsWindow.openDevTools();
  if(packagejson.ENV == "dev"){
    setOriginsWindow.openDevTools();
  }
})
    // parent:startWindow,
    // fullscreen: true,
    // modal:true,
    // show:false

ipcMain.on('start-procedure', (event) => {
  mainWindow = new BrowserWindow({
  })
  mainWindow.on('close', function () {mainWindow = null});
  mainWindow.loadURL(`file://${__dirname}/main_page.html`);
  mainWindow.once('ready-to-show', () => {
    mainWindow.show();
  });
  mainWindow.openDevTools();
  if(packagejson.ENV == "dev"){
    mainWindow.openDevTools();
  }
})

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

app.on('activate', () => {
  if (startWindow === null) {
    createWindow();
  }
});
'''

要打开的第一个页面应该是带有按钮的启动画面，按下该按钮将打开页面 2。页面 2 有一个按钮，按下时将打开页面 3。

【问题讨论】：

标签： javascript jquery html css electron

【解决方案1】：

Electron 不适合多页应用，在换页时会显示大约四分之一秒的空白屏幕。相反，您可能希望创建一个包含所有页面的文件，并使用 DOM 方法在它们之间切换

举例

var splash_screen = document.getElementById('splash-screen');
var second_screen = document.getElementById('second-screen');
var third_screen = document.getElementById('third-screen');
document.removeChild(second_screen)
document.removeChild(third_screen)
var splash_button_click = () => {
document.removeChild(splash_screen);
document.appendChild(second_screen);
}

【讨论】：