CODEWITHSUNDEEP
javascriptelectron
Ichor Dragon
Ichor Dragon

Reputation: 61

electron, how can I make another window with loading a different file

I'm using the most basic main.js file with a little modification where there's nothing else except calling the main window command. I want to make it like when clicking a button, it'll call another window with loading a different html file.

main.js:

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

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
// eslint-disable-next-line global-require
if (require('electron-squirrel-startup')) {
  app.quit();
}

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1200, //1196 + 4
    height: 714, //684 + 30
    resizable: false,
    autoHideMenuBar: true,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
    icon: path.join(__dirname, 'res/applogo.png')
  });
  // and load the index.html of the app.
  mainWindow.loadFile(path.join(__dirname, 'index.html'));
  
  // Open the DevTools.
  mainWindow.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.on('ready', createWindow);

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

app.on('activate', () => {
  // On OS X 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();
  }
});

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>my app</title>
    <link rel="stylesheet" href="index.css" />

    <script>
      document.querySelector('button').addEventListener('click', () => {
        window.open('devTool.html', "_blank"); // local file
      })
    </script>

  </head>
  <body>
    <script src="index.js"></script>


    <div class="application-container">

      <div class="menu-container">

        <button class="menu-button" data-title="Save Chart"></button>
        <button class="menu-button" data-title="Chart Information"></button>
        <button class="menu-button" data-title="Keybind Settings"></button>
        <button class="menu-button" data-title="Customization"></button>
        <button class="menu-button" data-title="Developer Tool"></button>

      </div>

      <div class="main-container">

        <div class="main-setting-container"></div>

        <div class="main-editor-container"></div>

        <div class="main-object-container"></div>

        

      </div>

      <div class="miscellaneous-container">

        <div class="miscellaneous-info-container"></div>

        <div class="miscellaneous-action-container"></div>

        <div class="miscellaneous-seperator-container">

          <div class="miscellaneous-seperator-left"></div>
          <div class="miscellaneous-seperator-right"></div>

        </div>

        <div class="miscellaneous-setting-container"></div>

      </div>

    </div>

    
  </body>
</html>

index.js is empty I've tried a few solutions (window.open,newWindow and openWindow()) for making this but none of them worked after clicking the button. Instead, the window opened before I clicking the button (it loads automatically). I want to know like how can I make it with the button from the html code above (if possible with the button) or which mistake could I made with 3 examples above Thank you for reading this so far, please help me if you could.

Upvotes: 2

Views: 1820

Answers (1)

Lukas249
Lukas249

Reputation: 2471

Just add window.open like that and add <script> at the end of the body.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>my app</title>
    <link rel="stylesheet" href="index.css" />

  </head>
  <body>
    ........................
    <button>Open new window</button>
    <script>
       document.querySelector('button').addEventListener('click', () => {
            window.open('index.html', null, "width=1200,height=714,resizable=1"); // local file
       })
    </script>
  </body>
</html>

to add icon to every window add this to main.js

app.on("browser-window-created", (event, window) => {
    window.setIcon(path.join(__dirname, 'res/applogo.png'))
});

Upvotes: 2

Related Questions