electron 以电子方式加载网站和html文件

hwazgwia 于 2022-12-08 发布在 Electron

关注(0)|答案(1)|浏览(181)

所以我是一个电子新手，我决定为我的第一个项目做一个简单的浏览器游戏客户端。本质上我想做的是加载网站，然后在上面添加一些HTML来添加某些功能，比如关闭/最小化/最大化，以及一个导航栏，而不是默认的windows导航栏。
我遇到的问题是我似乎无法加载网站和上面的HTML（如果这是可能的话）。有人能帮我吗？

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()
  }
})

electron

来源：https://stackoverflow.com/questions/73949647/loading-a-website-and-html-file-in-electron

1条答案

按热度按时间

kr98yfug1#

这是有可能的。
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;
}

赞(0）回复(0）举报 2022-12-08

我来回答

electron 以电子方式加载网站和html文件

1条答案

相关问题

热门标签

最新问答