Aller au contenu principal

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. We currently recommend to not use the webview tag and to consider alternatives, like iframe, a WebContentsView, or an architecture that avoids embedded content altogether.

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="https://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="https://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="https://example.com/"></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.

Cette valeur ne peut être modifiée qu'avant la première navigation.

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[, options])​

  • url string
  • options Object (facultatif)
    • headers Record<string, string> (optional) - HTTP request headers.

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 de la page web actuelle le CSS inséré. 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>.centerSelection()​

Centers the current text selection in 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>.scrollToTop()​

Défile vers le haut de la <webview> actuelle.

<webview>.scrollToBottom()​

Défile vers le bas de la <webview> actuelle.

<webview>.adjustSelection(options)​

  • Objet options
    • start Number (facultatif) - Valeur du déplacement de l'index de début de la sélection actuelle.
    • end Number (facultatif) - Valeur du déplacement de l'index de fin de la sélection actuelle.

Ajuste les points de début et de fin de la sélection de texte en cours dans la frame ayant le focus sur les valeurs indiquées. Une valeur négative déplacera la sélection vers le début du document et une positive vers la fin du document.

See webContents.adjustSelection for examples.

<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) - Indique si la rechercher s'effectue en avant ou 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 requête findInPage associée à l' action fournie envers le webview .

<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 dernière page à imprimer (démarre à 0).
      • 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> (optional)
      • 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. Même que 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(optional) - Scale of the webpage rendering. 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.
    • generateTaggedPDF boolean (optional) Experimental - Whether or not to generate a tagged (accessible) PDF. false par défaut. As this property is experimental, the generated PDF may not adhere fully to PDF/UA and WCAG standards.
    • generateDocumentOutline boolean (optional) Experimental - Whether or not to generate a PDF document outline from content headers. false par défaut.

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>

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.sendToFrame pour des exemples.

<webview>.sendInputEvent(event)​

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 devez utiliser pour cela l'événement did-navigate-in-page.

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

Événement : 'will-frame-navigate'​

Retourne :

  • url string
  • isMainFrame boolean
  • frameProcessId Integer
  • frameRoutingId Integer

Emitted when a user or the page wants to start navigation anywhere in the <webview> or any frames embedded within. It can happen when the window.location object is changed or a user clicks a link in the 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 devez utiliser pour cela l'événement did-navigate-in-page.

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

Événement : 'did-start-navigation'​

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.

Événement : 'did-start-navigation'​

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. Vous devez utiliser pour cela l'événement did-navigate-in-page.

É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.

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. Vous devez utiliser pour cela l'événement did-navigate-in-page.

É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] - une 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 : 'render-process-gone'​

Retourne :

Déclenché lorsque le processus de rendu disparait de manière inattendue. C'est habituelement parce qu'il s'est planté ou qu'il a été tué.

É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 le clavier déplace le focus vers un lien.

Événement : 'devtools-opened'​

Retourne :

  • url string - URL du lien qui a été cliqué ou sélectionné.

Émis lorsqu'un lien est cliqué dans DevTools ou qu'"Ouvrir dans un nouvel onglet" est sélectionné pour un lien dans son menu contextuel.

Event: 'devtools-search-query'​

Retourne :

  • event Event
  • query string - text to query for.

Emitted when 'Search' is selected for text in its context menu.

É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.

Événement : 'context-menu'​

Retourne :

  • params Object
    • x Integer - coordonnée x.
    • y Integer - coordonée y.
    • linkURL string - L'URL du lien qui englobe le node 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 de plus haut niveau d'où le menu contextuel a été appelé.
    • frameURL string - L'URL de la subframe d'où le menu contextuel a été appelé.
    • 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 de node par lequel le menu contextuel a été appelé. Peut être none, image, audio, vidéo, toile, fichier ou plugin.
    • hasImageContents boolean - Indique si le menu contextuel a été appelé à partir d'une image au contenu non-vide.
    • isEditable boolean - Indique si le contexte est modifiable ou pas.
    • selectionText string - Texte de la sélection à partir de laquelle le menu contextuel a été appelé.
    • 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 - The misspelled word under the cursor, if any.
    • dictionarySuggestions string[] - An array of suggested words to show the user to replace the misspelledWord. Uniquement disponible si un mot est mal orthographié et que le correcteur orthographique est activé.
    • frameCharset string - The character encoding of the frame on which the menu was invoked.
    • formControlType string - The source that the context menu was invoked on. Possible values include none, button-button, field-set, input-button, input-checkbox, input-color, input-date, input-datetime-local, input-email, input-file, input-hidden, input-image, input-month, input-number, input-password, input-radio, input-range, input-reset, input-search, input-submit, input-telephone, input-text, input-time, input-url, input-week, output, reset-button, select-list, select-list, select-multiple, select-one, submit-button, and text-area,
    • 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 s'est planté.
      • isPaused boolean - Indique si l'élément multimédia est en pause.
      • isMuted boolean - Indique si le son de l'élément multimédia est coupé.
      • hasAudio boolean - Si l'élément multimédia possède une piste audio.
      • isLooping boolean - Indique si l'élément multimédia est en boucle.
      • isControlsVisible boolean - Indique si les contrôles de l'élément multimédia sont visibles.
      • canToggleControls boolean - Si les contrôles de l'élément multimédia peuvent être acivés ou désactivés.
      • 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 - Indique si on peut faire pivoter l'élément multimédia.
      • 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 - Indique si le moteur de rendu estime pouvoir aller en arrière.
      • canRedo boolean - Indique si le moteur de rendu estimepouvoir aller en avant.
      • canCut boolean - Indique si le moteur de rendu estime pouvoir couper.
      • canCopy boolean - Indique si le moteur de rendu estime pouvoir copier.
      • canPaste boolean - Indiqe si le moteur de rendu estime pouvoir coller.
      • canDelete boolean - Indique si le moteur de rendu estime pouvoir supprimer.
      • canSelectAll boolean - Indiqe si le moteur de rendu estime 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 a besoin d'être pris en charge.