Balise `<webview>`

Avertissement

La balise webview d'Electron est basée sur la webview de Chromium, qui subit des changements architecturaux spectaculaires. Cela affecte la stabilité des webviews, y compris le rendu, la navigation et le routage des événements. Nous recommandons actuellement de ne pas utiliser le tag webview et d’envisager des alternatives, comme iframe, Electron’s BrowserView, ou une architecture qui évite complètement le contenu intégré.

Activation

Par défaut, la balise webview est désactivée dans Electron >= 5. Vous devez activer la balise en définissant l'option webviewTag des webPréferenceslors de l'instanciation de votre BrowserWindow. Pour plus d'information voir la doc pour : BrowserWindow constructor .

Vue d'ensemble

Affiche un contenu web externe dans une frame et un processus isolés.

Processus : Rendu
Cette classe n'est pas exportée depuis le module 'electron'. Elle n'est disponible qu'en tant que valeur de retour des autres méthodes dans l'API Electron.

Utilisez la balise webview pour intégrer du contenu 'hébergé' (comme des pages web) dans votre application Electron. Le contenu hébergé est inclus dans le conteneur webview. Une page intégrée dans votre application gère la façon dont le contenu est mis en page et affiché.

Contrairement à uneiframe, la webview s'exécute dans un processus séparé de votre application . Il n'a pas les mêmes permissions que votre page web et toutes les interactions entre votre application et le contenu intégré seront asynchrones. Cela protège votre application du contenu incorporé. Note: La plupart des méthodes appelées sur la webview à partir de la page hôte nécessitent un appel synchrone au processus principal.

Exemple

Pour intégrer une page web dans votre application, ajoutez la balise webview à la page de votre application qui va l'intégrer (c'est la page de l'application qui affichera le contenu de cette page). Dans sa forme la plus simple la balise webview inclut la src de la page web et les styles css qui contrôlent l'apparence du conteneur webview:

<webview id="foo" src="https://www.github.com/" style="display:inline-flex; width:640px; height:480px"></webview>

Si vous voulez contrôler de quelque manière que ce soit le contenu hébergé , vous pouvez écrire du JavaScript qui écoute les événements webview et répond à ces événements en utilisant les méthodes de la webview. Voici un exemple de code avec deux écouteurs d'événements : un qui écoute quand la page web commence à télécharger, l'autre quand la page web arrête le chargement, et affiche un message "loading..." pendant le temps de chargement :

<script>
  onload = () => {
    const webview = document.querySelector('webview')
    const indicator = document.querySelector('.indicator')

    const loadstart = () => {
      indicator.innerText = 'loading...'
    }

    const loadstop = () => {
      indicator.innerText = ''
    }

    webview.addEventListener('did-start-loading', loadstart)
    webview.addEventListener('did-stop-loading', loadstop)
  }
</script>

Implémentation interne

Dans les détails webview est implémentée avec des iframes hors processus (OOPIF). La balise webview est essentiellement un élément personnalisé utilisant un DOM fantôme pour encapsuler un élément iframe.

Donc, le comportement d'une webview est très similaire à une iframe cross-domain, comme dans ces exemples :

Lorsque vous cliquez sur une webview, le focus de la page passe de la frame qui la contient à cette webview.
Vous ne pouvez pas ajouter d’écouteurs d’événements de clavier, de souris ou de défilement à une webview.
Toutes les réactions entre la frame qui l'intègre et cette webview sont asynchrones.

Note de style CSS

Veuillez noter que le style de la balise webview utilise en interne display:flex; afin de s’assurer que l’élément iframe enfant remplit toute la hauteur et la largeur de sa webview lors de l'utilisation avec des dispositions traditionnelles et flexbox. Veuillez ne pas écraser la propriété CSS par défaut display:flex;, sauf si vous specifiez display:inline-flex; pour la disposition en ligne.

Les Attributs de la balise Webview

La balise webview possède les attributs suivants :

`src`

<webview src="https://www.github.com/"></webview>

Un string représentant l'URL visible. L’écriture dans cet attribut lance la navigation de niveau supérieur.

En affectant sa propre valeur l'attribut src on rechargera la page actuelle.

L'attribut src peut également accepter des URL de données, telles que data:text/plain,Hello, world !.

`nodeintegration`

<webview src="http://www.google.com/" nodeintegration></webview>

Type: boolean. Lorsque cet attribut est présent, la page hébergée dans la webview pourra utiliser les API de node. js telles que require ou process pour accéder à des ressources système de bas niveau. L'iintegration de node. js est désactivée par défaut dans la page hébergée.

`nodeintegrationinsubframes`

<webview src="http://www.google.com/" nodeintegrationinsubframes></webview>

Un boolean pour l'option expérimentale qui peut activer le support de NodeJS dans les sous-frames telles que les iframes à l'intérieur de webview. Toutes vos préchargement seront chargés pour chaque iframe, vous pouvez utiliser process.isMainFrame pour déterminer si vous êtes ou non dans la frame principale. Cette option est désactivée par défaut dans la page hébergée.

`plugins`

<webview src="https://www.github.com/" plugins></webview>

Type: boolean. Lorsque cet attribut est présent, la page hébergée par la webview sera en mesure d'utiliser les plugins du navigateur. Les plugins sont désactivés par défaut.

`preload`

<!-- à partir d'un fichier -->
<webview src="https://www.github.com/" preload="./test.js"></webview>
<! - ou si vous voulez à partir d'une archive asar -->
<webview src="https://www.github.com/" preload="./app.asar/test.js"></webview>

String Spécifie un script qui sera chargé avant les autres scripts exécutés dans la page hébergée. Le protocole de l'URL du script doit être file: (même en utilisant des archives asar: ) car il sera chargé, sous le capot, par require de Node qui traite les archives asar: comme des répertoires virtuels.

Lorsque la page hébergée n'a pas l'intégration de node d'activée, ce script aura toujours l'accès à toutes les API de Node, mais les objets globaux injectés par Node seront supprimés après l'exécution de ce script.

`httpreferrer`

<webview src="https://www.github.com/" httpreferrer="http://cheng.guru"></webview>

Un string qui définit l'URL du referrer pour la page hébergée.

`useragent`

<webview src="https://www.github.com/" useragent="Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; AS; rv:11.0) like Gecko"></webview>

Une string qui définit l'agent utilisateur de la page hébergée avant que la page ne soit parcourue. Une fois la page chargée, vous devrez utiliser la méthode setUserAgent pour changer l'agent utilisateur.

`disablewebsecurity`

<webview src="https://www.github.com/" disablewebsecurity></webview>

Type: boolean. Quand cet attribut est présent, la page hébergée aura la sécurité web désactivée. La sécurité Web est activée par défaut.

`partition`

<webview src="https://github.com" partition="persist:github"></webview>
<webview src="https://electronjs.org" partition="electron"></webview>

string qui définit la session utilisée par la page. Si partition commence par persist:, la page utilisera une session persistante disponible pour toutes les pages de l'application avec le même partition. s'il n'y a pas de préfixe persistant:, la page utilisera une session en mémoire . En assignant la même partition, plusieurs pages peuvent partager la même session. Si partition est vide la session par défaut de l'application sera retournée.

Cette valeur ne peut être modifiée qu'avant la première navigation, puisque la session d'un processus de rendu actif ne peut pas changer. Les tentatives ultérieures de modification de la valeur échoueront avec une exception DOM.

`allowpopups`

<webview src="https://www.github.com/" allowpopups></webview>

Type: boolean. Lorsque cet attribut est présent, la page hébergée sera autorisée à ouvrir de nouvelles fenêtres . Les popups sont désactivés par défaut.

`webpreferences`

<webview src="https://github.com" webpreferences="allowRunningInsecureContent, javascript=no"></webview>

C'est une string qui est une liste de chaînes séparées par des virgules spécifiant les préférences web à définir pour la webview. La liste complète des préférences supportées peut être trouvée dans BrowserWindow.

La chaîne suit le même format que la chaîne de caractères dans window.open. Un nom par lui même représente une valeur booléenne true. Une préférence peut recevoir une autre valeur en incluant un =, suivi de la valeur. Les valeurs spéciales yes et 1 sont interprétées comme true, tandis que no et 0 sont interprétées comme false.

`enableblinkfeatures`

<webview src="https://www.github.com/" enableblinkfeatures="PreciseMemoryInfo, CSSVariables"></webview>

Un string qui est une liste de chaînes qui spécifie les fonctionnalités de blink à activer séparées par des ,. La liste complète des chaînes de fonctionnalités supportées peut être trouvée dans le fichier RuntimeEnabledFeatures.json5 .

`disableblinkfeatures`

<webview src="https://www.github.com/" disableblinkfeatures="PreciseMemoryInfo, CSSVariables"></webview>

Un string qui est une liste de chaînes qui spécifie les fonctionnalités de blink à désactiver séparées par des ,. La liste complète des chaînes de fonctionnalités supportées peut être trouvée dans le fichier RuntimeEnabledFeatures.json5 .

Méthodes

La balise webview possède les méthodes suivantes :

Remarque : L'élément webview doit être chargé avant d'utiliser ces méthodes.

Exemple

const webview = document.querySelector('webview')
webview.addEventListener('dom-ready', () => {
  webview.openDevTools()
})

`<webview>.loadURL(url[, options])`

url URL
options Object (facultatif)
- httpReferrer (string | Referrer) (facultatif) - L'url HTTP d'un Referrer.
- userAgent string (optionnel) - L'agent utilisateur à l'origine de la requête.
- extraHeaders string (optionnel) - Headers supplémentaires séparés par "\n"
- postData (UploadRawData | UploadFile)[] (facultatif)
- baseURLForDataURL string (facultatif) - Url de base (avec le séparateur de fin du chemin) pour que les fichiers soient chargés par l'Url transmise. Ceci n'est nécessaire que si l'url spécifiée est une Url de données et a besoin de charger d'autres fichiers.

Retourne Promise<void> - La promesse se résoudra lorsque la page aura terminé de se charger (voir did-finish-load), et sera rejettée si la page ne se charge pas (voir did-fail-load).

Charge la webview avec url, cette url doit contenir le préfixe du protocole, comme par exemple http:// ou file://.

`<webview>.downloadURL(url)`

url string

Lance le téléchargement de la ressource située à l'url sans naviguer.

`<webview>.getURL()`

Retourne string - l'URL de la page web hébergée.

`<webview>.getTitle()`

Retourne string - Titre de la page hébergée.

`<webview>.isLoading()`

Retourne boolean - Indique si la page hébergée est toujours en cours de chargement de ressources.

`<webview>.isLoadingMainFrame()`

Retourne boolean - Si la frame principale (et pas seulement un iframe ou frames qu'il contient) sont toujours en chargement.

`<webview>.isWaitingForResponse()`

Retourne boolean - Indique si la page web est en attente d'une première réponse de la ressource principale de la page.

`<webview>.stop()`

Arrête toute navigation en attente.

`<webview>.reload()`

Recharge la page web hébergée.

`<webview>.reloadIgnoringCache()`

Recharge la page hébergée en ignorant le cache.

`<webview>.canGoBack()`

Retourne boolean - Indique si la page hébergée peut revenir en arrière.

`<webview>.canGoForward()`

Retourne boolean - Indique si la page web hébergée peut naviguer vers l'avant.

`<webview>.canGoToOffset(offset)`

offset Integer

Retourne boolean - Indique si la page hébergée peut aller à offset.

`<webview>.clearHistory()`

Efface l'historique de navigation.

`<webview>.goBack()`

Fait revenir en arrière la page hébergée.

`<webview>.goForward()`

Fait avancer la page hebergée.

`<webview>.goToIndex(index)`

index Integer

Navigue jusqu'à l'index spécifié.

`<webview>.goToOffset(offset)`

offset Integer

Navigue vers l'offset spécifié à partir de l' "entrée courante".

`<webview>.isCrashed()`

Retourne boolean - Indique si le processus de rendu a planté.

`<webview>.setUserAgent(userAgent)`

userAgent string

Surcharge l'agent utilisateur de la page hébergée.

`<webview>.getUserAgent()`

Retourne string - l'agent utilisateur de la page hébergée.

`<webview>.insertCSS(css)`

css string

Retourne Promise<string> - Une promesse qui résout avec une clé pour le CSS inséré pouvant être utilisée plus tard pour supprimer le CSS via <webview>.removeInsertedCSS(key).

Injecte du CSS dans la page Web actuelle et renvoie une clé unique pour la feuille de style insérée .

`<webview>.removeInsertedCSS(key)`

key string

Retourne Promise<void> - se résolvant si la suppression a réussi.

Supprime le CSS inséré de la page web actuelle. La feuille de style est identifiée par sa clé, qui est retournée par <webview>.insertCSS(css).

`<webview>.executeJavaScript(code[, userGesture])`

code string
userGesture boolean (facultatif) - false par défaut.

Retourne Promise<any> - Une promesse qui se résout avec le résultat du code exécuté ou se rejette si le résultat du code est une promesse rejetée.

Évalue le code dans la page. Si userGesture est défini à true, il créera le contexte gestuel de l'utilisateur dans la page. Les API HTML comme requestFullScreen, qui nécessitent une action de l'utilisateur , peuvent profiter de cette option pour l'automatisation.

`<webview>.openDevTools()`

Ouvre une fenêtre DevTools pour la page hébergée.

`<webview>.closeDevTools()`

Ferme la fenêtre DevTools de la page hébergée.

`<webview>.isDevToolsOpened()`

Retourne boolean - Indique si la page hébergée est attachée à une fenêtre de DevTools.

`<webview>.isDevToolsFocused()`

Retourne boolean - Si la fenêtre DevTools de la page hébergée a le focus.

`<webview>.inspectElement(x, y)`

x Integer
y Integer

Démarre l’inspection de l’élément en position (x, y) de la page hébergée.

`<webview>.inspectSharedWorker()`

Ouvre les DevTools pour le contexte du worker partagé présent dans la page hébergée.

`<webview>.inspectServiceWorker()`

Ouvre les DevTools pour le contexte du worker partagé présent dans la page hébergée.

`<webview>.setAudioMuted(muted)`

muted boolean

Coupe le son de la page hébergée.

`<webview>.isAudioMuted()`

Retourne boolean - Indique si la page web hébergée a été rendu muette.

`<webview>.isCurrentlyAudible()`

Retourne boolean - Indique si l'audio est en cours de lecture.

`<webview>.undo()`

Exécute la commande d'édition undo dans la page.

`<webview>.redo()`

Exécute l'édition de la commande redo dans la page.

`<webview>.cut()`

Exécute l'édition de la commande cut dans la page.

`<webview>.copy()`

Exécute l'édition de la commande copy dans la page.

`<webview>.paste()`

Exécute l'édition de la commande paste dans la page.

`<webview>.pasteAndMatchStyle()`

Exécute l'édition de la commande pasteAndMatchStyle dans la page.

`<webview>.delete()`

Exécute l'édition de la commande delete dans la page.

`<webview>.selectAll()`

Exécute l'édition de la commande selectAll dans la page.

`<webview>.unselect()`

Exécute l'édition de la commande unselect dans la page.

`<webview>.replace(text)`

text string

Exécute l'édition de la commande replace dans la page.

`<webview>.replaceMisspelling(text)`

text string

Exécute l'édition de la commande replaceMisspelling dans la page.

`<webview>.insertText(text)`

text string

Retourne Promise<void>

Insère le text à l'élément ciblé.

`<webview>.findInPage(text[, options])`

text string - Contenu à rechercher, ne doit pas être vide.
options Object (facultatif)
- forward boolean (facultatif) - Rechercher soit en avant soit en arrière, la valeur par défaut est true.
- findNext boolean (facultatif) - Indique si il faut commencer une nouvelle session de recherche de texte avec cette requête. Doit être true pour les requêtes initiales et false pour les requêtes de suivi. Par défaut, false.
- matchCase boolean (facultatif) - Indique si la recherche doit être sensible à la casse, par défaut à false.

Retourne Integer - L'identifiant de requête utilisé pour la requête.

Démarre une requête pour trouver toutes les concordances avec le text dans la page web. Le résultat de la requête peut être obtenu en s'abonnant à l'événement found-in-page.

`<webview>.stopFindInPage(action)`

action string - Spécifie l'action à effectuer à la fin de la requête <webview>.findInPage.
- clearSelection - Effacer la sélection.
- keepSelection - Convertir la sélection en une sélection normale.
- activateSelection - Donne le focus au node de la sélection et effectue un click.

Arrête toute demande findInPage pour le webview avec l' action fournie.

`<webview>.print([options])`

options Object (facultatif)
- silent boolean (facultatif) - Ne pas interroger à propos des paramètres d'impression. Par défaut la valeur est false.
- printBackground boolean (facultatif) - Imprime les couleur et image de fond de la page Web. Par défaut la valeur est false.
- deviceName string (facultatif) - Définit le nom du périphérique imprimante à utiliser. Doit être le nom défini par le système et non l'appelation, par exemple 'Brother_QL_820NWB' et non 'Brother QL-820NWB'.
- color booléen (facultatif) - Définit si l'impression de la page se fait en couleur ou en niveaux de gris. La valeur par défaut est true.
- margins Object (facultatif)
  - marginType string (facultatif) - Peut prendre les valeurs default, none, printableArea, ou custom. Si vous choisissez custom, vous devrez alors également spécifier top, bottom, left et right.
  - top number (facultatif) - Marge supérieure de la page web imprimée, exprimée en pixels .
  - bottom number (facultatif) - Marge inférieure de la page web imprimée, exprimée en pixels .
  - left number (facultatif) - Marge de gauche exprimée en pixels de la page web imprimée.
  - right number (facultatif) -Marge de droite de la page web imprimée, exprimée en pixels .
- landscape booléen (facultatif) - Indique si la page web doit être imprimée en mode paysage. Par défaut la valeur est false.
- scaleFactor number (facultatif) - Facteur d'échelle de la page web.
- pagesPerSheet number (facultatif) - Nombre de pages à imprimer par feuille.
- collate booléen (facultatif) - Indique si la page web doit être insérée dans un certain ordre.
- copies number (facultatif) - Nombre de copies à imprimer pour la page Web .
- pageRanges Object[] (facultatif) - La plage de page à imprimer.
  - from number - Index de la première page à imprimer (0-based).
  - to number - Index de la dernière page à imprimer (inclusif) (démarre à 0).
- duplexMode string (facultatif) - Définit le mode duplex de la page web imprimée. Peut prendre les valeurs simplex, shortEdge, ou longEdge.
- dpi Record<string, number> (facultatif)
  - horizontal number (facultatif) - Le nombre de dpi en horizontal.
  - vertical number (facultatif) - Le nombre de dpi en vertical.
- header string (facultatif) - chaîne à imprimer en tant qu'en-tête de page.
- footer string (facultatif) - chaîne à imprimer en bas de page.
- pageSize string | Taille (facultatif) - Spécifie la taille du document imprimé. Peut être A3, A4, A5, Legal, Letter, Tabloid ou un objet contenant height et en microns.

Retourne Promise<void>

Imprime la page web de la webview. Identique à webContents.print([options]).

`<webview>.printToPDF(options)`

Objet options
- landscape booléen (facultatif) - Orientation du papier.true pour le paysage, false pour le portrait. false par défaut.
- displayHeaderFooter boolean (facultatif) - Indique si on affiche l'en-tête et le pied de page. false par défaut.
- printBackground boolean (facultatif) - Indique si om imprimer ou non les graphiques en arrière-plan. false par défaut.
- scale number(facultatif) - Échelle du rendu de la page web. 1 par défaut.
- pageSize string | Taille (facultatif) - Spécifie la taille de la page du PDF généré. Peut être A0, A1, A2, A3, A4, A5, A6, Legal, Letter, Tabloid, Ledger, ou un objet contenant height et width pouces. Letter par défaut.
- margins Object (facultatif)
  - top number (facultatif) - Marge supérieure exprimée en pouces. 1cm par défaut (~0.4 pouce).
  - bottom number (facultatif) - Marge inférieure exprimée en pouces. 1cm par défaut (~0.4 pouce).
  - left number (facultatif) - Marge gauche exprimée en pouces. 1cm par défaut (~0.4 pouce).
  - right number (facultatif) - Marge droite exprimée en pouces. 1cm par défaut (~0.4 pouce).
- pageRanges string (facultatif) - Plage des pages à imprimer, ex: '1-5, 8, 11-13'. Par défaut: une chaîne vide, signifiant d'afficher toutes les pages.
- headerTemplate string (facultatif) - Modèle du HTML de l'entête d'impression. Doit être un balisage HTML valide avec les classes suivantes utilisées pour y injecter les valeurs d’impression : date (date d’impression formatée), title(titre du document), url(emplacement du document), pageNumber (numéro de page actuel) et totalPages (nombre total de pages dans le document). Par exemple, <span class=title></span> générera un span contenant le titre.
- footerTemplate string (facultatif) - Modèle du HTML du pied de page d'impression. Doit utiliser le même format que le headerTemplate.
- preferCSSPageSize boolean (facultatif) - Indique si on optera ou non pour la taille de page définie par le css. Faux par défaut, auquel cas le contenu sera mis à l'échelle pour s'adapter à la taille du papier.

Retourne une Promise<Uint8Array> -se résolvant avec des données PDF générées.

Imprime la page web de webview au format PDF, est identique à webContents.printToPDF(options).

`<webview>.capturePage([rect])`

rect Rectangle (optionnel) - La zone de la page dont on doit réaliser la capture.

Retourne Promise<NativeImage> - résout avec une NativeImage

Capture un instantané de la zone de la page définie par rect. Une capture de la page entière sera réalisée en l'absence de rect.

`<webview>.send(channel, ...args)`

channel string
...args any[]

Retourne Promise<void>

Envoi un message asynchrone et éventuellement un certain nombre d'arguments au processus de rendu via channel. . Le processus de rendu peut gérer le message en écoutant l'événement channel à l'aide du module ipcRenderer.

Voir webContents.send pour des exemples.

`<webview>.sendToFrame(frameId, channel, ...args)`

frameId [number, number] - [processId, frameId]
channel string
...args any[]

Retourne Promise<void>

Voir webContents.sendToFrame pour des exemples.

`<webview>.sendInputEvent(event)`

event MouseInputEvent | MouseWheelInputEvent | KeyboardInputEvent

Retourne Promise<void>

Envoie un event d’input à la page.

Voir <webContents.sendInputEvent pour une description détaillée de l'objet event.

`<webview>.setZoomFactor(factor)`

factor number - Facteur de zoom.

Modifie le facteur de zoom en utilisant le facteur spécifié. Le Zoom factor est égal à la valeur du zoom exprimée en pourcent divisée par 100, donc 300% = 3.0.

`<webview>.setZoomLevel(level)`

level number - Niveau de zoom.

Modifie le niveau de zoom jusqu'au niveau spécifié. La taille originale est de 0 et chaque incrément au-dessus ou en dessous représente un zoom de 20% supérieur ou inférieure jusqu'au limites de 300% et 50% de la taille originale, respectivement. La formule pour cela est 'scale:= 1,2 ^ level.

NOTE: La politique du zoom au niveau de Chromium est same-origin, ce qui signifie que le niveau de zoom pour un domaine spécifique se propage à travers toutes les instances de fenêtres du même domaine. Une différenciation de l'URL des fenêtre assignera un niveau de zoom par fenêtre.

`<webview>.getZoomFactor()`

Retourne number - Le facteur de zoom actuel.

`<webview>.getZoomFactor()`

Retourne number - Le niveau de zoom actuel.

`<webview>.setVisualZoomLevelLimits(minimumLevel, maximumLevel)`

minimumLevel number
maximumLevel number

Retourne Promise<void>

Définit le niveau maximum et minimum le niveau pinch-to-zoom.

`<webview>.showDefinitionForSelection()` macOS

Affiche un dictionnaire contextuel qui recherche le mot sélectionné sur la page.

`<webview>.getWebContentsId()`

Retourne number - L'ID WebContents de cette webview.

Événements du DOM

Les événements DOM suivants sont disponibles pour la balise webview:

Événement : 'load-commit'

Retourne :

url string
isMainFrame boolean

Emis lorsqu'un chargement a été accompli. Cela inclut la navigation dans le document actuel ainsi que les chargement au niveau des sous-frames, mais n'inclut pas les chargements asynchrones de ressources.

Événement : 'did-finish-load'

Émis lorsque la navigation a abouti, c'est à dire que le loader de l'onglet a cessé de tourner, et que l'événement onload a été émis.

Événement : 'did-fail-load'

Retourne :

errorCode Integer
errorDescription string
validatedURL string
isMainFrame boolean

Cet événement est identique à did-finish-load, mais se déclenche lorsque le chargement échoue ou a été annulé, par exemple par un appel à window.stop().

Événement : 'did-frame-finish-load'

Retourne :

isMainFrame boolean

Émis lorsqu'une frame a fini sa navigation.

Événement : 'did-start-loading'

Correspond au moment où le loader de l'onglet commence à tourner.

Événement : 'did-stop-loading'

Correspond au moment où le loader de l'onglet arrête de tourner.

Événement : 'did-navigate'

Déclenché lors de l'attachement au contenu Web de l'élément l'intégrant.

Événement : 'dom-ready'

Émis lorsque le document dans la frame donnée a terminé son chargement.

Événement : 'page-title-updated'

Retourne :

title string
explicitSet boolean

Emis lorsque le titre de la page est défini pendant la navigation. explicitSet est à false lorsque le titre est synthétisé à partir de l’url du fichier.

Événement : 'page-favicon-updated'

Retourne :

favicons string[] - Tableau d'URLs.

Émis lorsque la page reçoit l’url du favicon.

Événement : 'enter-html-full-screen'

Emis lorsque la page entre en plein écran déclenché par l'API HTML.

Événement : 'leave-html-full-screen'

Déclenché lorsque la page quitte le plein écran déclenché par l'API HTML.

Événement : 'console-message'

Retourne :

level Integer - Le niveau de logging, de 0 à 3. Correspondant dans l'ordre croissant à verbose, info, warning et error.
message string - Message actuel de la console
line Integer - Numéro de la ligne du source qui a déclenché le message affiché dans la console
sourceId string

Émis lorsque la fenêtre hébergée affiche un message de log dans la console.

L'exemple suivant renvoie tous les messages de log à la console de l'hôte sans tenir compte du niveau de log ou d'autres propriétés.

const webview = document.querySelector('webview')
webview.addEventListener('console-message', (e) => {
  console.log('La page invité a envoyé un message :', e.message)
})

Événement : 'found-in-page'

Retourne :

result Object
- requestId Integer
- activeMatchOrdinal Integer - Position du résultat actif.
- matches Integer - Nombre de résultats.
- sélectionArea Rectangle - Coordonnées de la région de la première correspondance.
- finalUpdate boolean

Emis lorsqu'un résultat est disponible pour la requête webview.findInPage.

const webview = document.querySelector('webview')
webview.addEventListener('found-in-page', (e) => {
  webview.stopFindInPage('keepSelection')
})

const requestId = webview.findInPage('test')
console.log(requestId)

Événement : 'will-navigate'

Retourne :

url string

Émis lorsqu’un utilisateur ou la page souhaite démarrer la navigation. Cela peut se produire lorsque l’objet window.location est modifié ou qu’un utilisateur clique sur un lien dans la page.

Cet événement ne sera pas émis lorsque la navigation démarre par programmation à l'aide d'APIs telles que <webview>.loadURL ou <webview>.back.

Il n'est pas non plus émis lors de la navigation dans la page, comme par exemple par des clicks sur des liens d'ancre ou la mise à jour de window.location.hash. Vous devrez, dans de tels cas, utiliser l'événement did-navigate-in-page.

L'appel dà event.preventDefault() n'a PAS d'effet.

Retourne :

url string
isInPlace boolean
isMainFrame boolean
frameProcessId Integer
frameRoutingId Integer

Émis lorsqu’une frame (y compris principale) commence à naviguer. isInPlace sera true pour les navigations internes à la page.

Retourne :

url string
isInPlace boolean
isMainFrame boolean
frameProcessId Integer
frameRoutingId Integer

Émis après une redirection côté serveur pendant la navigation. Par exemple, une redirection 302 .

Événement : 'did-navigate'

Retourne :

url string

Émis lorsqu'une navigation est faite.

Cet événement n’est pas émis pour les navigations internes à la page, telles que le clic sur les liens d’ancrage ou la mise à jour du window.location.hash. Utiliser l'événement did-navigate-in-page pour cela.

Événement : 'did-navigate'

Retourne :

url string
httpResponseCode Integer - -1 fpour les navigations non HTTP
httpStatusText string - vide pour les navigations non HTTP,
isMainFrame boolean
frameProcessId Integer
frameRoutingId Integer

Émis lorsqu'une navigation est terminée.

Événement : 'did-navigate-in-page'

Retourne :

isMainFrame boolean
url string

Émis lorsqu'une navigation dans la page s'est produite.

En cas de navigation dans la page, l'URL de la page change mais ne provoque pas de navigation à l'extérieur de la page. Par exemple, lorsque vous cliquez sur un lien d'ancrage ou lorsque l'événement DOM hashchange est déclenché.

Événement : 'close'

Emis lorsque la page hébergée tente de se fermer.

L'exemple suivant permet de naviguer entre webview et about:blank lorsque la page hébergée tente de se fermer.

const webview = document.querySelector('webview')
webview.addEventListener('close', () => {
  webview.src = 'about:blank'
})

Événement : 'ipc-message'

Retourne :

frameId [number, number] - paire de [processId, frameId].
channel string
args any[]

Déclenché lorsque la page hébergée a envoyé un message asynchrone à la page hébergeante.

Avec la méthode sendToHost et l'événement ipc-message , vous pouvez communiquer entre la page hénergée et la page hébergeante:

// Dans la page hébergeante.
const webview = document.querySelector('webview')
webview.addEventListener('ipc-message', (event) => {
  console.log(event.channel)
  // Prints "pong"
})
webview.send('ping')

// Dans la page hébergée.
const { ipcRenderer } = require('electron')
ipcRenderer.on('ping', () => {
  ipcRenderer.sendToHost('pong')
})

Événement : 'crashed'

Emis lorsque le processus de rendu est planté.

Événement : 'plugin-crashed'

Retourne :

name string
version string

Déclenché lorsqu’un processus de plugin crash.

Événement : 'destroyed'

Déclenché lorsque le WebContents est détruit.

Événement : 'media-started-playing'

Émis lorsqu'un média se démarre.

Événement : 'media-paused'

Émis lorsque le média est suspendu ou terminé.

Événement : 'did-change-theme-color'

Retourne :

themeColor string

Émis lorsque la couleur du thème d'une page change. Cela est généralement dû à une balise meta :

<meta name='theme-color' content='#ff0000'>

Événement : 'update-target-url'

Retourne :

url string

Émis lorsque la souris passe sur un lien ou que le clavier déplace le focus vers un lien.

Événement : 'devtools-opened'

Émis lorsque la DevTools est ouverte.

Événement : 'devtools-closed'

Émis lorsque la DevTools est fermée.

Événement : 'devtools-focused'

Émis lorsque la DevTools est active / ouverte.

Retourne :

params Object
- x Integer - coordonnée x.
- y Integer - coordonée y.
- linkURL string - L'URL du lien qui englobe le nœud du menu contextuel.
- linkText string - Texte associé au lien. Peut être une chaîne vide si le contenu du lien est une image.
- pageURL string - L'URL de la page haut niveau d'où le menu contextuel a été invoqué.
- frameURL string - L'URL de la subframe d'où le menu contextuel a été invoqué.
- chaîne srcURL : URL de la source de l’élément par lequel le menu contextuel a été appelé. Les éléments avec des URL sources peuvent être des images, de l’audio ou de la vidéo.
- mediaType string - Type du nœud sur lequel le menu contextuel a été appelé. Peut prendre une des valeurs suivantes: none, image, audio, video, canvas, file ou plugin.
- hasImageContents boolean - Si le menu contextuel a été invoqué sur une image au contenu non-vide ou non.
- isEditable boolean - Si le contexte est modifiable ou non.
- selectionText string - Texte de la sélection sur laquelle le menu contextuel a été invoqué.
- titleText string : Texte du title de la sélection à partir de laquelle le menu contextuel a été appelé.
- altText string - Texte de remplacement (alt) de la sélection à partir de laquelle le menu contextuel a été appelé.
- chaîne suggestedFilename - Nom de fichier suggéré à utiliser lors de l’enregistrement du fichier via l’option « Enregistrer le lien sous » du menu contextuel.
- selectionRect Rectangle - Rectangle représentant les coordonnées de la sélection dans l’espace du document .
- selectionStartOffset number- Position de départ du texte de la sélection.
- referrerPolicy Referrer - Stratégie du réferrer de la frame à partir de laquelle le menu est appelé.
- misspelledWord string - Mot mal orthographié sous le curseur, si applicable.
- dictionarySuggestions string[] - Un tableau de mots suggérés à montrer à l'utilisateur pour remplacer le misspelledWord. Uniquement disponible si un mot est mal orthographié et que le correcteur orthographique est activé.
- frameCharset string - L'encodage des caractères de la fenêtre sur lequel le menu a été appelé.
- inputFieldType string - Si le menu contextuel a été appelé sur un champ modifiable, donne le type de ce champ. Les valeurs possibles sont none, plainText, password, other.
- spellcheckEnabled boolean - Indique si la vérification orthographique est activée ou non dans les cas où le contexte est éditable,.
- menuSourceType string - Source de l'appel au menu contextuel. Peut être une de ces valeurs none, mouse, keyboard, touch, touchMenu, longPress, longTap, touchHandle, stylus, adjustSelection, adjustSelectionReset.
- mediaFlags Object - Les drapeaux de l'élément multimédia sur lequel le menu contextuel a été appelé .
  - inError boolean - Si l'élément multimédia a crash.
  - isPaused boolean - Si l'élément multimédia est en pause.
  - isMuted boolean - Si l'élément multimédia est mis en sourdine.
  - hasAudio boolean - Si l'élément multimédia émet un son audio.
  - isLooping boolean - Si l'élément multimédia est en boucle.
  - isControlsVisible boolean - Si les contrôles de l'élément multimédia sont visibles.
  - canToggleControls boolean - Si les contrôles de l'élément multimédia sont toggleable.
  - canPrint booléen - Indique si on peut faire une impression à partir de l'élément multimédia.
  - canSave booléen - Indique si l'élément multimédia peut être téléchargé ou non.
  - canShowPictureInPicture boolean - Indique si l'élément multimédia peut s'afficher en mode "picture-in-picture".
  - isShowingPictureInPicture booléen - Indique si l'élément multimédia est actuellement affiché en mode "picture-in-picture".
  - canRotate boolean - Si l'élément multimédia peut être pivoté.
  - canLoop booléen - Indique si l'élément multimédia peut être mis en mode boucle.
- editFlags Object - Ces drapeaux indiquent si le moteur de rendu estime être en mesure d'effectuer l'action correspondante.
  - canUndo boolean - Si le moteur de rendu pense pouvoir aller en arrière.
  - canRedo boolean - Si le moteur de rendu pense pouvoir aller en avant.
  - canCut boolean - Si le moteur de rendu pense pouvoir couper.
  - canCopy boolean - Si le moteur de rendu pense pouvoir copier.
  - canPaste boolean - Si le moteur de rendu pense pouvoir coller.
  - canDelete boolean - Si le moteur de rendu pense pouvoir supprimer.
  - canSelectAll boolean - Si le moteur de rendu pense pouvoir tout sélectionner.
  - canEditRichly boolean - Indique si le moteur de rendu pense pouvoir editer du texte avec des styles.

Émis lorsqu'un nouveau menu contextuel doit être géré.

Avertissement
Activation
Vue d'ensemble
Exemple
Implémentation interne
Note de style CSS
Les Attributs de la balise Webview
Méthodes
Événements du DOM

Balise <webview>

Avertissement​

Activation​

Vue d'ensemble​

Exemple​

Implémentation interne​

Note de style CSS​

Les Attributs de la balise Webview​

src​

nodeintegration​

nodeintegrationinsubframes​

plugins​

preload​

httpreferrer​

useragent​

disablewebsecurity​

partition​

allowpopups​

webpreferences​

enableblinkfeatures​

disableblinkfeatures​

Méthodes​

<webview>.loadURL(url[, options])​

<webview>.downloadURL(url)​

<webview>.getURL()​

<webview>.getTitle()​

<webview>.isLoading()​

<webview>.isLoadingMainFrame()​

<webview>.isWaitingForResponse()​

<webview>.stop()​

<webview>.reload()​

<webview>.reloadIgnoringCache()​

<webview>.canGoBack()​

<webview>.canGoForward()​

<webview>.canGoToOffset(offset)​

<webview>.clearHistory()​

<webview>.goBack()​

<webview>.goForward()​

<webview>.goToIndex(index)​

<webview>.goToOffset(offset)​

<webview>.isCrashed()​

<webview>.setUserAgent(userAgent)​

<webview>.getUserAgent()​

<webview>.insertCSS(css)​

<webview>.removeInsertedCSS(key)​

<webview>.executeJavaScript(code[, userGesture])​

<webview>.openDevTools()​

<webview>.closeDevTools()​

<webview>.isDevToolsOpened()​

<webview>.isDevToolsFocused()​

<webview>.inspectElement(x, y)​

<webview>.inspectSharedWorker()​

<webview>.inspectServiceWorker()​

<webview>.setAudioMuted(muted)​

<webview>.isAudioMuted()​

<webview>.isCurrentlyAudible()​

<webview>.undo()​

<webview>.redo()​

<webview>.cut()​

<webview>.copy()​

<webview>.paste()​

<webview>.pasteAndMatchStyle()​

<webview>.delete()​

<webview>.selectAll()​

<webview>.unselect()​

<webview>.replace(text)​

<webview>.replaceMisspelling(text)​

<webview>.insertText(text)​

<webview>.findInPage(text[, options])​

<webview>.stopFindInPage(action)​

<webview>.print([options])​

<webview>.printToPDF(options)​

<webview>.capturePage([rect])​

<webview>.send(channel, ...args)​

<webview>.sendToFrame(frameId, channel, ...args)​

<webview>.sendInputEvent(event)​

<webview>.setZoomFactor(factor)​

<webview>.setZoomLevel(level)​

<webview>.getZoomFactor()​

<webview>.getZoomFactor()​

Balise `<webview>`

Avertissement

Activation

Vue d'ensemble

Exemple

Implémentation interne

Note de style CSS

Les Attributs de la balise Webview

`src`

`nodeintegration`

`nodeintegrationinsubframes`

`plugins`

`preload`

`httpreferrer`

`useragent`

`disablewebsecurity`

`partition`

`allowpopups`

`webpreferences`

`enableblinkfeatures`

`disableblinkfeatures`

Méthodes

`<webview>.loadURL(url[, options])`

`<webview>.downloadURL(url)`

`<webview>.getURL()`

`<webview>.getTitle()`

`<webview>.isLoading()`

`<webview>.isLoadingMainFrame()`

`<webview>.isWaitingForResponse()`

`<webview>.stop()`

`<webview>.reload()`

`<webview>.reloadIgnoringCache()`

`<webview>.canGoBack()`

`<webview>.canGoForward()`

`<webview>.canGoToOffset(offset)`

`<webview>.clearHistory()`

`<webview>.goBack()`

`<webview>.goForward()`

`<webview>.goToIndex(index)`

`<webview>.goToOffset(offset)`

`<webview>.isCrashed()`

`<webview>.setUserAgent(userAgent)`

`<webview>.getUserAgent()`

`<webview>.insertCSS(css)`

`<webview>.removeInsertedCSS(key)`

`<webview>.executeJavaScript(code[, userGesture])`

`<webview>.openDevTools()`

`<webview>.closeDevTools()`

`<webview>.isDevToolsOpened()`

`<webview>.isDevToolsFocused()`

`<webview>.inspectElement(x, y)`

`<webview>.inspectSharedWorker()`

`<webview>.inspectServiceWorker()`

`<webview>.setAudioMuted(muted)`

`<webview>.isAudioMuted()`

`<webview>.isCurrentlyAudible()`

`<webview>.undo()`

`<webview>.redo()`

`<webview>.cut()`

`<webview>.copy()`

`<webview>.paste()`

`<webview>.pasteAndMatchStyle()`

`<webview>.delete()`

`<webview>.selectAll()`

`<webview>.unselect()`

`<webview>.replace(text)`

`<webview>.replaceMisspelling(text)`

`<webview>.insertText(text)`

`<webview>.findInPage(text[, options])`

`<webview>.stopFindInPage(action)`

`<webview>.print([options])`

`<webview>.printToPDF(options)`

`<webview>.capturePage([rect])`

`<webview>.send(channel, ...args)`

`<webview>.sendToFrame(frameId, channel, ...args)`

`<webview>.sendInputEvent(event)`

`<webview>.setZoomFactor(factor)`

`<webview>.setZoomLevel(level)`

`<webview>.getZoomFactor()`

`<webview>.getZoomFactor()`