Intégrations Web

Vue d'ensemble

Pour intégrer du contenu web (provenant d'une source tierce) dans une BrowserWindow d'Electron vous disposez des trois options suivantes: les balises <iframe> et <webview> ou l'utilisation de BrowserView. Chacune offre des fonctionnalités légèrement différentes et utile dans des situations différentes. Pour vous aider dans votre choix, ce guide explique les différences et les capacités de chaque option.

Iframes

Les Iframes se comportent dans Electron comme dans les navigateurs ordinaires. Un élément <iframe> de votre page peut afficher des pages web externes, à condition que leur Content Security Policy le permette. Afin de limiter les fonctionnalités d’un site dans une balise <iframe> , il est recommandé d’utiliser l’attribut sandbox et d’autoriser uniquement les fonctionnalités que vous souhaitez prendre en charge.

WebViews

Note importante : nous vous déconseillons d'utiliser les WebViews, car cette balise subit des changements architecturaux dramatiques qui peuvent affecter la stabilité de votre application. Envisagez de basculer vers des alternatives telles que l'iframe , la BrowserView d'Electron ou une architecture évitant par sa conception d'embarquer du contenu.

Les WebViews sont basées sur les WebViews de Chromium et ne sont pas explicitement supportés par Electron. Nous ne garantissons pas que l'API WebView demeurera disponible dans les futures versions d'Electron. Pour utiliser les balises <webview> , vous devrez définir webviewTag à true dans les webPreferences de votre BrowserWindow.

WebView est un élément personnalisé (<webview>) qui ne fonctionnera qu'à l'intérieur d'Electron. Son implémentation est semblable à une "iframe hors processus". Cela signifie que toute la communication avec la <webview> est faite de manière asynchrone en utilisant IPC. L'élément <webview> possède de nombreuses méthodes et événements personnalisés, similaire à webContents, qui vous donnent un grand contrôle sur le contenu.

Comparé à une <iframe>, <webview> tend à être légèrement plus lent, mais offre un contrôle beaucoup plus important dans le chargement et la communication avec le contenu tiers ainsi que la gestion de divers événements.

WebContentsView

WebContentsViews are not a part of the DOM—instead, they are created, controlled, positioned, and sized by your Main process. Using WebContentsView, you can combine and layer many pages together in the same BaseWindow.

WebContentsViews offer the greatest control over their contents, since they implement the webContents similarly to how BrowserWindow does it. However, as WebContentsViews are not elements inside the DOM, positioning them accurately with respect to DOM content requires coordination between the Main and Renderer processes.