In Electron, using the `<webview>` tag is an effective way to embed additional web content into your application without affecting the main process. The `<webview>` is similar to an independent browser window and offers a rich API to control and interact with it. In a previous project of mine, I used `<webview>` to embed a complex third-party web service and exchanged data with the main application using Electron's IPC (Inter-Process Communication) mechanism.

### Step 1: Enable the `webview` Tag
First, ensure that the `webviewTag` option is enabled in the creation parameters of your `BrowserWindow`:

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

app.on('ready', () => {
  let mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // Enable webview tag support
      webviewTag: true
    }
  });

  mainWindow.loadFile('index.html');
});
```

### Step 2: Add `<webview>` to HTML File
In your application's HTML file, you can use `<webview>` just like a regular HTML tag:

```html

<!DOCTYPE html>
<html>
<head>
  <title>My Electron App</title>
</head>
<body>
  <webview id="foo" src="https://www.example.com" style="width:100%; height:100%"></webview>
</body>
</html>
```

### Step 3: Control `<webview>`
You can control the behavior of `<webview>` using JavaScript. For example, you can listen for the `<webview>`'s load completion event or execute scripts within the webview:

```javascript
document.addEventListener('DOMContentLoaded', () => {
  const webview = document.querySelector('webview');

  webview.addEventListener('did-finish-load', () => {
    console.log('Page loaded!');
  });

  // Execute JavaScript in the webview
  webview.executeJavaScript('document.title')
    .then(title => console.log(`Page title: ${title}`));
});
```

### Step 4: Use Preload Scripts (Optional)
If you need to inject JavaScript into the `<webview>`'s page without directly executing it in its content, you can safely execute using a preload script:

```javascript
let mainWindow = new BrowserWindow({
  webPreferences: {
    webviewTag: true,
    // Set preload script
    preload: 'path/to/preload.js'
  }
});
```

These steps demonstrate how to effectively use `<webview>` in an Electron application to load and control external web pages. By doing so, I successfully integrated a complex third-party service in a previous project while maintaining the application's performance and security.

How to use the < webview > methods in Electron

1个答案

Step 1: Enable the `webview` Tag

Step 2: Add `<webview>` to HTML File

Step 3: Control `<webview>`

Step 4: Use Preload Scripts (Optional)

你的答案

How to use the < webview > methods in Electron

1个答案

Step 1: Enable the webview Tag

Step 2: Add <webview> to HTML File

Step 3: Control <webview>

Step 4: Use Preload Scripts (Optional)

你的答案

Step 1: Enable the `webview` Tag

Step 2: Add `<webview>` to HTML File

Step 3: Control `<webview>`