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

昱晏

于 2024-07-01 21:18:15 发布

阅读量467

点赞数 7

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

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

版权

Electron 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

5.4 加载和显示不同类型的资源

Electron 支持加载和显示多种类型的资源，包括图片、视频和其他静态文件。

5.4.1 加载图片的示例代码

index.html：

<!DOCTYPE html>
<html>
<head>
  <title>Load Image</title>
</head>
<body>
  <h1>Load Image Example</h1>
  <img src="path/to/image.jpg" alt="Example Image">
</body>
</html>

5.4.2 加载视频的示例代码

index.html：

<!DOCTYPE html>
<html>
<head>
  <title>Load Video</title>
</head>
<body>
  <h1>Load Video Example</h1>
  <video width="600" controls>
    <source src="path/to/video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</body>
</html>

5.5 处理加载错误

在加载内容时，可能会遇到各种错误，例如网络问题或文件不存在。我们可以通过监听 webContents 事件来处理这些错误。

5.5.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
    }
  });

  // 监听加载失败事件
  mainWindow.webContents.on('did-fail-load', (event, errorCode, errorDescription, validatedURL) => {
    console.error(`Failed to load ${validatedURL}: ${errorDescription} (${errorCode})`);
    // 显示错误页面
    mainWindow.loadFile('error.html');
  });

  // 加载本地的 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();
  }
});

error.html：

<!DOCTYPE html>
<html>
<head>
  <title>Error</title>
</head>
<body>
  <h1>Failed to load content</h1>
  <p>There was an error loading the requested content. Please try again later.</p>
</body>
</html>

5.6 使用 WebView 标签

WebView 标签允许在 Electron 应用中嵌入其他 Web 内容，类似于一个嵌入的浏览器。它运行在独立的进程中，并且具有更高的安全性和稳定性。

5.6.1 使用 WebView 标签的示例代码

index.html：

<!DOCTYPE html>
<html>
<head>
  <title>WebView Example</title>
</head>
<body>
  <h1>WebView Example</h1>
  <webview id="foo" src="https://www.example.com" style="width:800px; height:600px"></webview>
</body>
</html>

主进程代码：

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,
      webviewTag: true // 启用 WebView 标签
    }
  });

  mainWindow.loadFile('index.html');

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

通过本章内容，你已经了解了如何在 Electron 应用中加载和显示各种内容，包括本地 HTML 文件、远程 URL、动态内容以及各种类型的资源，并处理加载错误和使用 WebView 标签。接下来的章节将继续深入探讨更多高级功能和最佳实践，帮助你进一步掌握 Electron 开发。

昱晏

关注

7
点赞
踩
4

收藏

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

通过本章内容，你已经了解了如何在 Electron 应用中加载和显示各种内容，包括本地 HTML 文件、远程 URL、动态内容以及各种类型的资源，并处理加载错误和使用。标签允许在 Electron 应用中嵌入其他 Web 内容，类似于一个嵌入的浏览器。它运行在独立的进程中，并且具有更高的安全性和稳定性。Electron 支持加载和显示多种类型的资源，包括图片、视频和其他静态文件。在加载内容时，可能会遇到各种错误，例如网络问题或文件不存在。事件来处理这些错误。
复制链接

扫一扫

专栏目录