CODEWITHSUNDEEP
javascripthtmlelectron
Ian
Ian

Reputation: 45

Loading a website and html file in electron

So I'm new to electron and for my first project I decided to do a simple client for a browser game. Essentially what I want to do is load the website, and then add some HTML above it to add certain functionalities like closing/minimizing/maximizing, and a nav bar that isn't the default windows one.

The issue I have is that I can't seem to load the website and then the HTML above it (if that's even possible). Could anyone help me out with this?

const { app, BrowserWindow /* ipcMain */ } = require('electron')
const path = require('path')

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
mainWindow.loadURL('https://bapbap.gg')
}



/*win.loadFile('index.html')*/

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

/*
ipcMain.on('close', () => {
  app.quit()
})
*/

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

Upvotes: 1

Views: 2011

Answers (2)

ben_foster04
ben_foster04

Reputation: 65

In the interests of keeping threads up to date, I'd recommend reading through the Web Embeds page in the Electron documentation. The accepted answer isn't recommended by Electron. https://www.electronjs.org/docs/latest/tutorial/web-embeds

I'm currently developing a Kiosk application designed for Raspberry Pis which similarly only displays another web page. You could rely upon the native application window structure in the Constructor Options for BrowserWindow or BaseWindow to handle your application control (Max/Min/Close). See below

const mainWindow = new BaseWindow({
    width: 1920,
    height: 1080
});
const view = new WebContentsView();

// Put your URL in here
view.webContents.loadURL("https://bapbap.gg");

// This expands the WebContentsView to the max bounds of the BaseWindow parent.
view.setBounds(mainWindow.getBounds());

// Now add it to the BaseWindow parent
mainWindow.contentView.addChildView(view);

Upvotes: 1

Lukas249
Lukas249

Reputation: 2471

It's possible.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div>
        <button>Minimize</button>
        <button>Maximize</button>
        <button>Close</button>
    </div>
    <webview src="https://bapbap.gg"></webview>
</body>

</html>

index.js

const { app, BrowserWindow, /* ipcMain */ 
webContents} = require("electron");
const path = require("path");



function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        frame: false,

        webPreferences: {
            webviewTag: true,
        },
    });

    win.loadFile("index.html");
}

app.whenReady().then(() => {
    createWindow();

    app.on("activate", () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    });
});

/*
ipcMain.on('close', () => {
  app.quit()
})
*/

style.css

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    height: 100vh;
}

webview {
    flex: 1;
}

Upvotes: 2

Related Questions