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

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