Electron, création d'un double de la fenêtre principale en cas de clic sur un bouton

Question

Electron, création d'un double de la fenêtre principale en cas de clic sur un bouton

Demandé el 2 de Mars, 2020: Quand la question a-t-elle été
1097 affichage: Nombre de visites la question a
2 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je fais un électron et que l'utilisateur puisse ouvrir autant d'instances de la fenêtre principale (celle qui s'ouvre par défaut) qu'il le souhaite.

J'aimerais qu'ils puissent le faire en cliquant simplement sur un bouton dans l'application index.html .

Comment cela serait-il possible dans le code des applications par défaut suivantes ?

main.js

const { app, BrowserWindow } = require('electron')

function createWindow () {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  win.loadFile('index.html')

  // Open the DevTools.
  win.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </head>
  <body>
    <button onclick="openWindow()">click to open new window</button>
  </body>
</html>

Demandé el 2 de Mars, 2020 par Alex Hawking

Answer 1

2 Réponses

Answer 2

2voto

Mike Points 1274

Tout ce que vous avez à faire est d'envoyer un message à votre processus principal lorsque vous cliquez sur votre bouton, puis dans main.js créer une nouvelle fenêtre à chaque fois que nous recevons ce message.

Envoyez donc d'abord un message à main.js de votre openWindow() comme ceci :

var ipcRenderer = require('electron').ipcRenderer;
function openWindow () {
    ipcRenderer.send('asynchronous-message', 'createNewWindow');
}

Ensuite, nous écoutons le message dans main.js comme ça :

var ipcMain = require('electron').ipcMain;
ipcMain.on('asynchronous-message', function (evt, message) {
    if (message == 'createNewWindow') {
        // Message received.
        // Create new window here.
    }
});

Il vous suffit alors de créer une nouvelle fenêtre lorsque vous recevez le message 'createNewWindow' message.

Voir les docs pour envoyer un message au processus principal

Voir la documentation sur la réception des messages dans le processus principal.

Répondu el 2 de Mars, 2020 par Mike (1274 Points )

Answer 3

1voto

tpikachu Points 3339

Vous pouvez atteindre votre objectif de deux manières.

Vous devriez changer votre index.html d'en faire des pré-requis A votre index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <body>
    <button onclick="require('./renderer.js').openWindow()">click to open new window</button>
  </body>
    <!-- All of the Node.js APIs are available in this renderer process. -->
    We are using Node.js <script>document.write(process.versions.node)</script>,
    Chromium <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.

    <script>
      // You can also require other files to run in this process
      require('./renderer.js')
    </script>
  </body>
</html>

Utilisation de la communication ipc.

A votre main.js

const {app, BrowserWindow, ipcMain} = require('electron')
let browserWindows = [];

function createWindow () {
  // Create the browser window.
  let newWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  newWindow.loadFile('index.html')

  newWindow.on('closed', function () {
    newWindow = null
  })

  browserWindows.push(newWindow)
}

app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

ipcMain.on('createNewWindow', (evnet, args) => {
  createWindow();
})

A votre renderer.js

const { ipcRenderer } = require('electron')
module.exports.openWindow = event => {
  ipcRenderer.send('createNewWindow', {});
}

N'utilise pas l'ipc. vous pouvez créer directement. Créer browserWindow directement dans votre moteur de rendu sans ipc Communautaire. Vous devez donc activer l'API de nœud dans votre moteur de rendu. De sorte que

A votre renderer.js

const {BrowserWindow} = require('electron').remote
module.exports.openWindow = event => {
  const newWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
        nodeIntegration: true
      }
    })

  // and load the index.html of the app.
  newWindow.loadFile('index.html')
}

De cette façon, vous n'avez pas besoin de changer votre main.js

Répondu el 3 de Mars, 2020 par tpikachu (3339 Points )

Electron, création d'un double de la fenêtre principale en cas de clic sur un bouton

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Electron, création d'un double de la fenêtre principale en cas de clic sur un bouton

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: