以下是使用 <webview> 标签的基本示例：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electron WebView Example</title>
</head>
<body>
<webview id="exampleWebView" src="https://example.com" style="width: 800px; height: 600px;"></webview>
</body>
</html>
在上述示例中，<webview> 元素的 src 属性指定了要加载的网址，而 style 属性指定了 WebView 的大小。
在渲染进程中，你可以使用 JavaScript 代码与 <webview> 进行交互。以下是一些基本的操作：
// renderer.js
const webView = document.getElementById('exampleWebView');
// 监听加载完成事件
webView.addEventListener('did-finish-load', () => {
console.log('WebView finished loading');
});
// 执行 WebView 中的 JavaScript 代码
webView.executeJavaScript('alert("Hello from WebView!");');
// 在 WebView 中执行打开 DevTools 的操作
webView.openDevTools();
在主进程中，你可以通过 webContents 对象与 <webview> 进行进程间通信。以下是一个简单的例子：
// main.js
const { app, BrowserWindow } = require('electron');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadFile('index.html');
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
// 在主进程中监听 WebView 中的 IPC 消息
app.on('web-contents-created', (event, contents) => {
contents.on('ipc-message', (event, channel, ...args) => {
console.log(`Received IPC message from WebView: ${channel}`, args);
});
});
在上述例子中，主进程通过监听 'web-contents-created' 事件，捕获了 WebView 的 IPC 消息。在 WebView 中，你可以使用 ipcRenderer 发送消息到主进程。
请注意，由于 WebView 具有独立的渲染进程，与主进程的通信可能需要使用 IPC。此外，使用 <webview> 时，请确保考虑安全性和跨站脚本攻击的问题。在加载不受信任的内容时，请格外小心。
转载请注明出处：http://www.pingtaimeng.com/article/detail/10913/Electron