第5章：Electron加载与显示内容(1）

昱晏

于 2024-07-01 21:17:37 发布

阅读量484

点赞数 15

分类专栏： Electron 文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/imdeity/article/details/139990552

版权

Electron 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

5.1 加载本地 HTML 文件

加载本地 HTML 文件是 Electron 应用中最常见的操作之一。我们可以使用 BrowserWindow 的 loadFile 方法加载一个 HTML 文件。

5.1.1 基础示例代码

主进程代码：

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

let mainWindow;

const createMainWindow = () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false
    }
  });

  // 加载本地的 index.html 文件
  mainWindow.loadFile('index.html');

  // 打开开发者工具（仅在开发阶段使用）
  mainWindow.webContents.openDevTools();

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

app.on('ready', createMainWindow);

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

app.on('activate', () => {
  if (mainWindow === null) {
    createMainWindow();
  }
});

index.html：

<!DOCTYPE html>
<html>
<head>
  <title>Main Window</title>
</head>
<body>
  <h1>Hello, Electron!</h1>
</body>
</html>

5.2 加载远程 URL

Electron 允许加载远程 URL，这使得我们可以将 Web 应用嵌入到 Electron 应用中。但需要注意安全性问题，避免加载不可信的内容。

5.2.1 加载远程 URL 的示例代码

主进程代码：

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

let mainWindow;

const createMainWindow = () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false
    }
  });

  // 加载远程 URL
  mainWindow.loadURL('https://www.example.com');

  // 打开开发者工具（仅在开发阶段使用）
  mainWindow.webContents.openDevTools();

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

app.on('ready', createMainWindow);

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

app.on('activate', () => {
  if (mainWindow === null) {
    createMainWindow();
  }
});

5.3 显示动态内容

在 Electron 应用中，可以使用 JavaScript 动态修改和显示内容。下面的示例展示了如何在主窗口中动态更新内容。

5.3.1 动态更新内容的示例代码

index.html：

<!DOCTYPE html>
<html>
<head>
  <title>Dynamic Content</title>
</head>
<body>
  <h1 id="title">Hello, Electron!</h1>
  <button id="updateButton">Update Content</button>

  <script>
    document.getElementById('updateButton').addEventListener('click', () => {
      document.getElementById('title').innerText = 'Content Updated!';
    });
  </script>
</body>
</html>

昱晏

关注

15
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
第5章：Electron加载与显示内容(1）

Electron 允许加载远程 URL，这使得我们可以将 Web 应用嵌入到 Electron 应用中。但需要注意安全性问题，避免加载不可信的内容。在 Electron 应用中，可以使用 JavaScript 动态修改和显示内容。
复制链接

扫一扫

专栏目录