Aller au contenu principal

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

Starts a request to find all matches for the text in the web page. 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 (optional) - Don't ask user for print settings. Par défaut la valeur est false.
    • printBackground boolean (optional) - Prints the background color and image of the web page. Par défaut la valeur est false.
    • deviceName string (optional) - Set the printer device name to use. Must be the system-defined name and not the 'friendly' name, e.g 'Brother_QL_820NWB' and not 'Brother QL-820NWB'.
    • color boolean (optional) - Set whether the printed web page will be in color or grayscale. La valeur par défaut est true.
    • margins Object (facultatif)
      • marginType string (optional) - Can be default, none, printableArea, or custom. If custom is chosen, you will also need to specify top, bottom, left, and right.
      • top number (optional) - The top margin of the printed web page, in pixels.
      • bottom number (optional) - The bottom margin of the printed web page, in pixels.
      • left number (optional) - The left margin of the printed web page, in pixels.
      • right number (optional) - The right margin of the printed web page, in pixels.
    • landscape boolean (optional) - Whether the web page should be printed in landscape mode. Par défaut la valeur est false.
    • scaleFactor number (optional) - The scale factor of the web page.
    • pagesPerSheet number (optional) - The number of pages to print per page sheet.
    • collate boolean (optional) - Whether the web page should be collated.
    • copies number (optional) - The number of copies of the web page to print.
    • pageRanges Object[] (facultatif) - La plage de page à imprimer.
      • from number - Index de la première page à imprimer (0-based).
      • to number - Index of the last page to print (inclusive) (0-based).
    • duplexMode string (optional) - Set the duplex mode of the printed web page. Can be simplex, shortEdge, or longEdge.
    • dpi Record<string, number> (optional)
      • horizontal number (optional) - The horizontal dpi.
      • vertical number (optional) - The vertical dpi.
    • header string (optional) - string to be printed as page header.
    • footer string (optional) - string to be printed as page footer.
    • pageSize string | Size (optional) - Specify page size of the printed document. Can be A3, A4, A5, Legal, Letter, Tabloid or an Object containing height in microns.

Retourne Promise<void>

Prints webview's web page. Identique à webContents.print([options]).

<webview>.printToPDF(options)

  • Objet options
    • headerFooter Record<string, string> (optional) - the header and footer for the PDF.
      • title string - The title for the PDF header.
      • url string - the url for the PDF footer.
    • landscape boolean (optional) - true for landscape, false for portrait.
    • marginsType Integer (optional) - Specifies the type of margins to use. Uses 0 for default margin, 1 for no margin, and 2 for minimum margin. and width in microns.
    • scaleFactor number (optional) - The scale factor of the web page. Can range from 0 to 100.
    • pageRanges Record<string, number> (optional) - The page range to print. On macOS, only the first range is honored.
      • from number - Index de la première page à imprimer (0-based).
      • to number - Index of the last page to print (inclusive) (0-based).
    • pageSize string | Size (optional) - Specify page size of the generated PDF. Can be A3, A4, A5, Legal, Letter, Tabloid or an Object containing height
    • printBackground boolean (optional) - Whether to print CSS backgrounds.
    • printSelectionOnly boolean (optional) - Whether to print selection only.

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

Prints webview's web page as PDF, Same as 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

Captures a snapshot of the page within rect. Omitting rect will capture the whole visible page.

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

  • channel string
  • ...args any[]

Retourne Promise<void>

Send an asynchronous message to renderer process via channel, you can also send arbitrary arguments. The renderer process can handle the message by listening to the channel event with the ipcRenderer module.

See webContents.send for examples.

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

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

Retourne Promise<void>

Send an asynchronous message to renderer process via channel, you can also send arbitrary arguments. The renderer process can handle the message by listening to the channel event with the ipcRenderer module.

See webContents.sendToFrame for examples.

<webview>.sendInputEvent(event)

Retourne Promise<void>

Sends an input event to the page.

See webContents.sendInputEvent for detailed description of event object.

<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()

Returns number - the current zoom factor.

<webview>.getZoomFactor()

Returns number - the current zoom level.

<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

Shows pop-up dictionary that searches the selected word on the page.

<webview>.getWebContentsId()

Returns number - The WebContents ID of this webview.

DOM Events

The following DOM events are available to the webview tag:

Événement : 'load-commit'

Retourne :

  • url string
  • isMainFrame boolean

Fired when a load has committed. This includes navigation within the current document as well as subframe document-level loads, but does not include asynchronous resource loads.

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

Fired when the navigation is done, i.e. the spinner of the tab will stop spinning, and the onload event is dispatched.

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

Retourne :

  • errorCode Integer
  • errorDescription string
  • validatedURL string
  • isMainFrame boolean

This event is like did-finish-load, but fired when the load failed or was cancelled, e.g. window.stop() is invoked.

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

Retourne :

  • isMainFrame boolean

Fired when a frame has done navigation.

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

Corresponds to the points in time when the spinner of the tab starts spinning.

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

Corresponds to the points in time when the spinner of the tab stops spinning.

Événement : 'did-navigate'

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

Événement : 'dom-ready'

Fired when document in the given frame is loaded.

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

Fired when page receives favicon urls.

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

Fired when page enters fullscreen triggered by HTML API.

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

Fired when page leaves fullscreen triggered by HTML API.

Événement : 'console-message'

Retourne :

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

Fired when the guest window logs a console message.

The following example code forwards all log messages to the embedder's console without regard for log level or other properties.

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

Fired when a result is available for webview.findInPage request.

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

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

Événement : 'new-window'

Retourne :

  • url string
  • frameName string
  • disposition string - Peut être default, foreground-tab, background-tab, new-window, save-to-disk et other.
  • options BrowserWindowConstructorOptions - The options which should be used for creating the new BrowserWindow.

Fired when the guest page attempts to open a new browser window.

The following example code opens the new url in system's default browser.

const { shell } = require('electron')
const webview = document.querySelector('webview')

webview.addEventListener('new-window', async (e) => {
const protocol = (new URL(e.url)).protocol
if (protocol === 'http:' || protocol === 'https:') {
await shell.openExternal(e.url)
}
})

É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 grâce aux APIs comme <webview>.loadURL et <webview>.back.

It is also not emitted during in-page navigation, such as clicking anchor links or updating the window.location.hash. Dans de tels cas, vous devrez utiliser l'événement did-navigate-in-page.

Calling event.preventDefault() does NOT have any effect.

É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. Dans de tels cas, vous devrez utiliser 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. Dans de tels cas, vous devrez utiliser 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'

Fired when the guest page attempts to close itself.

The following example code navigates the webview to about:blank when the guest attempts to close itself.

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

Événement : 'ipc-message'

Retourne :

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

Fired when the guest page has sent an asynchronous message to embedder page.

With sendToHost method and ipc-message event you can communicate between guest page and embedder page:

// In embedder page.
const webview = document.querySelector('webview')
webview.addEventListener('ipc-message', (event) => {
console.log(event.channel)
// Prints "pong"
})
webview.send('ping')
// In guest page.
const { ipcRenderer } = require('electron')
ipcRenderer.on('ping', () => {
ipcRenderer.sendToHost('pong')
})

Événement : 'crashed'

Fired when the renderer process is crashed.

É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. This is usually due to encountering a meta tag:

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

É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 nœud du menu contextuel.
    • linkText string - Text associated with the link. 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é.
    • srcURL string - Source URL for the element that the context menu was invoked on. 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 - Title text of the selection that the context menu was invoked on.
    • altText string - Alt text of the selection that the context menu was invoked on.
    • suggestedFilename string - Suggested filename to be used when saving file through 'Save Link As' option of context menu.
    • selectionRect Rectangle - Rectangle représentant les coordonnées de la sélection dans l’espace du document .
    • selectionStartOffset number - Start position of the selection text.
    • 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 - If the context is editable, whether or not spellchecking is enabled.
    • menuSourceType string - Input source that invoked the context menu. 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 boolean - Whether the media element can be printed.
      • canSave boolean - Whether or not the media element can be downloaded.
      • canShowPictureInPicture boolean - Whether the media element can show picture-in-picture.
      • isShowingPictureInPicture boolean - Whether the media element is currently showing picture-in-picture.
      • canRotate boolean - Si l'élément multimédia peut être pivoté.
      • canLoop boolean - Whether the media element can be looped.
    • 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 - Whether the renderer believes it can edit text richly.

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