webContents
Gestion des pages web et de leur rendu.
Processus : Main
webContents
est un EventEmitter. Il est responsable du rendu et du contrôle d'une page web et est une propriété de l'objet BrowserWindow
. Exemple d'accès à l'objet webContents
:
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ width: 800, height: 1500 })
win.loadURL('https://github.com')
const contents = win.webContents
console.log(contents)
Événements de navigation
Plusieurs événements peuvent être utilisés pour surveiller les navigations qui se produisent dans un webContents
.
Navigations de documents
Lorsqu'un webContents
navigue vers une autre page (par opposition à une navigation sur la page), les événements suivants seront déclenchés.
did-start-navigation
will-frame-navigate
will-navigate
(déclenché uniquement lorsque la frame principale navigue)will-redirect
(déclenché uniquement quand une redirection se produit pendant la navigation)did-redirect-navigation
(déclenché uniquement quand une redirection se produit pendant la navigation)did-frame-navigate
did-navigate
(déclenché uniquement lorsque la frame principale navigue)
Les événements ultérieus ne se déclencheront pas si event.preventDefault()
est appelé sur l'un des événements annulables.
Navigation dans la page
Les navigations dans les pages ne provoquent pas le rechargement de la page, mais plutôt la navigation vers un emplacement dans la page courante. Ces événements ne sont pas annulables. Pour une navigation dans la page, les événements suivants vont se déclencher dans cet ordre:
Navigation dans la fenêtre
Les événements will-navigate
et did-navigate
ne se déclenchent que lorsque le mainFrame navigue. Si vous désrirez également observer les navigations dans les <iframe>
s, utilisez les événements will-frame-navigate
et did-frame-navigate
.
Méthodes
Ces méthodes sont accessibles depuis le module webContents
:
const { webContents } = require('electron')
console.log(webContents)
webContents.getAllWebContents()
Retourne WebContents[]
- Un tableau de toutes les instances de WebContents
. Celui-ci contiendra les webContents
de toutes les fenêtres, webviews, devtools ouvertes et pages d'extention d'arrière-plan des devtools .
webContents.getFocusedWebContents()
Retourne WebContents | null
- Le contenu web qui a le focus dans cette application, sinon retourne null
.
webContents.fromId(id)
id
Integer
Retourne WebContents | undefined
- Une instance de WebContents dont l'ID est donné, ou undefined
si aucun contenu Web n’est associé à l'ID donné.
webContents.fromFrame(frame)
frame
WebFrameMain
Retourne WebContents | undefined
- Une instance de WebContents dont la WebFrameMain est donné, ou undefined
si aucun contenu Web n’est associé à la WebFrameMain.
webContents.fromDevToolsTargetId(targetId)
targetId
string - Le protocole Chrome DevTools TargetID associé à l'instance WebContents.
Retourne WebContents | undefined
- Une instance de WebContents dont le TargetID est donné, ou undefined
si aucun contenu Web n’est associé au TargetID.
Lors de la communication avec le protocole Chrome DevTools, il peut être utile de rechercher une instance WebContents par le TargetID qui lui est assigné.
async function lookupTargetId (browserWindow) {
const wc = browserWindow.webContents
await wc.debugger.attach('1.3')
const { targetInfo } = await wc.debugger.sendCommand('Target.getTargetInfo')
const { targetId } = targetInfo
const targetWebContents = await wc.fromDevToolsTargetId(targetId)
}
Classe : WebContents
Affiche et contrôle le contenu d'une instance de BrowserWindow.
Processus : Principal
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.
Événements d’instance
É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 :
event
EventerrorCode
IntegererrorDescription
stringvalidatedURL
stringisMainFrame
booleanframeProcessId
IntegerframeRoutingId
Integer
Cet événement est comme did-finish-load
mais émis lorsque le chargement a échoué. La liste complète des codes d'erreur et leur signification est disponible ici.
Événement : 'did-fail-provisional-load'
Retourne :
event
EventerrorCode
IntegererrorDescription
stringvalidatedURL
stringisMainFrame
booleanframeProcessId
IntegerframeRoutingId
Integer
Cet événement est comme did-fail-load
mais émis lorsque la chargement a été annulé (par exemple par un appel à window.stop()
).
Événement : 'did-frame-finish-load'
Retourne :
event
EventisMainFrame
booleanframeProcessId
IntegerframeRoutingId
Integer
Émis lorsqu'un 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 : 'dom-ready'
Émis lorsque le document de la frame de plus haut niveau est chargé.
Événement : 'page-title-updated'
Retourne :
event
Eventtitle
stringexplicitSet
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 :
event
Eventfavicons
string[] - Tableau d'URLs.
Émis lorsque la page reçoit l’url du favicon.
Événement : 'content-bounds-updated'
Retourne :
event
Eventbounds
Rectangle - nouvelles limites de contenu demandées
Émis lorsque la page appelle window.moveTo
, window.resizeTo
ou par les API associées.
Par défaut, cela déplacera la fenêtre. Pour prévenir ce comportement, appelez event.preventDefault()
.
Événement : 'did-create-window'
Retourne :
window
BrowserWindow- Objet
details
url
string - l'URL de la fenêtre crée.frameName
string - Nom donné à la fenêtre crée lors de l'appel àwindow.open()
.referrer
Referrer - L'origine qui sera passée à la nouvelle fenêtre. Peut selon la politique du référent entraîner ou non l'envoi de l'en-têteReferer
.postBody
PostBody (facultatif) - Les données qui seront envoyées à la nouvelle fenêtre, ainsi que les en-têtes appropriés qui seront définis. Si aucune donnée ne doit être envoyée, la valeur seranull
. Est uniquement défini lorsque la fenêtre est créée par un formulaire définissanttarget=_blank
.disposition
string - La valeur peut êtredefault
,foreground-tab
,background-tab
,new-window
ouother
.
Émis suite à la création réussie d’une fenêtre via window.open
dans le moteur de rendu. Non émis si la création de la fenêtre est annulée à partir de webContents.setWindowOpenHandler
.
Voir window.open()
pour plus de détails et l'utilisation en conjonction avec webContents.setWindowOpenHandler
.
Événement : 'will-navigate'
Retourne :
details
Event<>url
string - L'URL vers laquelle la frame est en train de naviguer.isSameDocument
- Cet événement ne se déclenche pas pour les navigations à l'intérieur d'un même document à l’aide de l'api window.history et celles de fragments de référence. Cette propriété est toujours définie àfalse
pour cet événement.isMainFrame
booléen - Vrai si la navigation se déroule dans une frame principale.frame
WebFrameMain - La frame dans la quelle la navigation va s'effectuer.initiator
WebFrameMain (facultatif) - La frame qui a initié la navigation et qui peut être une frame parente (e. . viawindow.open
avec le nom d'une trame ), ou null si la navigation n'a pas été initiée par une frame. Peut également être null si la frame qui a initiée a été supprimée avant que l'événement ne soit émis.
url
chaîne __ DépréciéisInPlace
boolean__ DépréciéisMainFrame
boolean__ DépréciéframeProcessId
Integer__ DépréciéframeRoutingId
Integer __ Déprécié
Émis lorsqu'un utilisateur ou la page veut démarrer la navigation dans la frame principale. 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 webContents.loadURL
et webContents.back
.
Il n’est pas non plus é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
.
Appeler event.preventDefault()
permet d'éviter la navigation.
Événement : 'will-frame-navigate'
Retourne :
details
Event<>url
string - L'URL vers laquelle la frame est en train de naviguer.isSameDocument
- Cet événement ne se déclenche pas pour les navigations à l'intérieur d'un même document à l’aide de l'api window.history et celles de fragments de référence. Cette propriété est toujours définie àfalse
pour cet événement.isMainFrame
booléen - Vrai si la navigation se déroule dans une frame principale.frame
WebFrameMain - La frame dans la quelle la navigation va s'effectuer.initiator
WebFrameMain (facultatif) - La frame qui a initié la navigation et qui peut être une frame parente (e. . viawindow.open
avec le nom d'une trame ), ou null si la navigation n'a pas été initiée par une frame. Peut également être null si la frame qui a initiée a été supprimée avant que l'événement ne soit émis.
Émis lorsqu'un utilisateur ou la page veut démarrer la navigation dans n'importe quelle frame. Cela peut se produire lorsque l’objet window.location
est modifié ou qu’un utilisateur clique sur un lien dans la page.
Contrairement à will-navigate
, will-frame-navigate
est déclenché lorsque la frame principale ou l'une de ses sous-frame tente de naviguer. Lorsque l'événement de navigation vient de la frame principale, isMainFrame
sera à true
.
Cet événement ne sera pas émis lorsque la navigation démarre par programmation grâce aux APIs comme webContents.loadURL
et webContents.back
.
Il n’est pas non plus é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
.
Appeler event.preventDefault()
permet d'éviter la navigation.
Événement : 'did-start-navigation'
Retourne :
details
Event<>url
string - L'URL vers laquelle la frame est en train de naviguer.isSameDocument
boolean - Indique si la navigation s'est produite sans modifier le document . Des exemples de navigation dans un même document sont le navigations de fragment de référence, les pushState/replaceState et la navigation dans l'historique de la même page.isMainFrame
booléen - Vrai si la navigation se déroule dans une frame principale.frame
WebFrameMain - La frame dans la quelle la navigation va s'effectuer.initiator
WebFrameMain (facultatif) - La frame qui a initié la navigation et qui peut être une frame parente (e. . viawindow.open
avec le nom d'une trame ), ou null si la navigation n'a pas été initiée par une frame. Peut également être null si la frame qui a initiée a été supprimée avant que l'événement ne soit émis.
url
chaîne __ DépréciéisInPlace
boolean__ DépréciéisMainFrame
boolean__ DépréciéframeProcessId
Integer__ DépréciéframeRoutingId
Integer __ Déprécié
Émis lorsqu’une frame (y compris principale) commence à naviguer.
Événement : 'will-redirect'
Retourne :
details
Event<>url
string - L'URL vers laquelle la frame est en train de naviguer.isSameDocument
boolean - Indique si la navigation s'est produite sans modifier le document . Des exemples de navigation dans un même document sont le navigations de fragment de référence, les pushState/replaceState et la navigation dans l'historique de la même page.isMainFrame
booléen - Vrai si la navigation se déroule dans une frame principale.frame
WebFrameMain - La frame dans la quelle la navigation va s'effectuer.initiator
WebFrameMain (facultatif) - La frame qui a initié la navigation et qui peut être une frame parente (e. . viawindow.open
avec le nom d'une trame ), ou null si la navigation n'a pas été initiée par une frame. Peut également être null si la frame qui a initiée a été supprimée avant que l'événement ne soit émis.
url
chaîne __ DépréciéisInPlace
boolean__ DépréciéisMainFrame
boolean__ DépréciéframeProcessId
Integer__ DépréciéframeRoutingId
Integer __ Déprécié
Émis lorsqu’une redirection côté serveur se produit pendant la navigation. Par exemple, une redirection 302 .
Cet événement sera émis après did-start-navigation
et pour la même navigation toujours avant l'événement did-redirect-navigation
.
L'appel à event.preventDefault()
empêchera la navigation (pas seulement la redirection).
Événement : 'did-start-navigation'
Retourne :
details
Event<>url
string - L'URL vers laquelle la frame est en train de naviguer.isSameDocument
boolean - Indique si la navigation s'est produite sans modifier le document . Des exemples de navigation dans un même document sont le navigations de fragment de référence, les pushState/replaceState et la navigation dans l'historique de la même page.isMainFrame
booléen - Vrai si la navigation se déroule dans une frame principale.frame
WebFrameMain - La frame dans la quelle la navigation va s'effectuer.initiator
WebFrameMain (facultatif) - La frame qui a initié la navigation et qui peut être une frame parente (e. . viawindow.open
avec le nom d'une trame ), ou null si la navigation n'a pas été initiée par une frame. Peut également être null si la frame qui a initiée a été supprimée avant que l'événement ne soit émis.
url
chaîne __ DépréciéisInPlace
boolean__ DépréciéisMainFrame
boolean__ DépréciéframeProcessId
Integer__ DépréciéframeRoutingId
Integer __ Déprécié
Émis après une redirection côté serveur pendant la navigation. Par exemple, une redirection 302 .
On ne peut pas éviter cet événement et si vous souhaitez empêcher les redirections, vous devez supprimer l’événement will-redirect
ci-dessus.
Événement : 'did-navigate'
Retourne :
event
Eventurl
stringhttpResponseCode
Integer - -1 fpour les navigations non HTTPhttpStatusText
string - vide pour les navigations non HTTP
Émis lorsque la navigation d'une fenêtre principale 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'
Retourne :
event
Eventurl
stringhttpResponseCode
Integer - -1 fpour les navigations non HTTPhttpStatusText
string - vide pour les navigations non HTTP,isMainFrame
booleanframeProcessId
IntegerframeRoutingId
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 :
event
Eventurl
stringisMainFrame
booleanframeProcessId
IntegerframeRoutingId
Integer
Émis lors d'une navigation interne à la page et dans n’importe quelle frame.
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 : 'will-prevent-unload'
Retourne :
event
Event
Émis lorsqu’un écouteur de l'événement beforeunload
tente d’annuler un déchargement de la page.
Appeler event.preventDefault()
ignorera l'écouteur de l'événement beforeunload
et va laisser la page se décharger.
const { BrowserWindow, dialog } = require('electron')
const win = new BrowserWindow({ width: 800, height: 600 })
win.webContents.on('will-prevent-unload', (event) => {
const choice = dialog.showMessageBoxSync(win, {
type: 'question',
buttons: ['Leave', 'Stay'],
title: 'Do you want to leave this site?',
message: 'Changes you made may not be saved.',
defaultId: 0,
cancelId: 1
})
const leave = (choice === 0)
if (leave) {
event.preventDefault()
}
})
Remarque: Cela sera émis pour lesBrowserViews
mais ne sera pas respecté - c’est parce que nous avons choisi de ne pas lier le cycle de vie de la BrowserView
à sa BrowserWindow propriétaire même s’il en existe une selon la spécification .
Événement : 'render-process-gone'
Retourne :
event
Eventdetails
RenderProcessGoneDetails
Émis 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 : 'unresponsive'
Émis lorsque la page web cesse de répondre.
Événement : 'responsive'
Émis lorsque la page web répond à nouveau.
Événement : 'plugin-crashed'
Retourne :
event
Eventname
stringversion
string
Émis lorsqu’un processus de plugin crash.
Événement : 'destroyed'
Émis lorsqu'un webContents
est détruit.
Événement : 'before-input-event'
Retourne :
event
EventinputEvent
InputEvent
Émis lorsqu'un événement d'entrée est envoyé au WebContents. Voir InputEvent pour plus de détails.
Événement : 'before-input-event'
Retourne :
event
Eventinput
Object - Propriétés d’input.type
string - Les valeurs possibles sontkeyUp
etkeyDown
.key
string - Équivalent à KeyboardEvent.key.code
string - Équivalent à KeyboardEvent.code.isAutoRepeat
boolean - Équivalent à KeyboardEvent.repeat.isComposing
booléen - Équivalent à KeyboardEvent.isComposing.shift
boolean - Équivalent à KeyboardEvent.shiftKey.control
boolean - Équivalent à KeyboardEvent.controlKey.alt
boolean - Équivalent à KeyboardEvent.altKey.meta
boolean - Équivalent à KeyboardEvent.metakey.location
number - 'Equivalent à KeyboardEvent.location.modifiers
string[] - Voir InputEvent.modifiers.
Émis avant d'envoyer les événements keydown
et keyup
dans la page. Appeler event.preventDefault
empêchera les événements keydown
/keyup
et les raccourcis du menu dans la page.
Pour empêcher uniquement les raccourcis de menu, utilisez setIgnoreMenuShortcuts
:
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ width: 800, height: 600 })
win.webContents.on('before-input-event', (event, input) => {
// Par exemple, active seulement les raccourcis clavier vers le menu de l'application
// lorsque les touches Ctrl/Cmd sont enfoncées.
win.webContents.setIgnoreMenuShortcuts(!input.control && !input.meta)
})
Événement : 'enter-html-full-screen'
Émis lorsque la fenêtre entre dans un état de plein écran déclenchée par l’API HTML.
Événement : 'leave-html-full-screen'
Émis lorsque la fenêtre revient d'un état de plein écran déclenchée par l’API HTML.
Événement : 'zoom-changed'
Retourne :
event
EventzoomDirection
string - Les valeurs possibles sontin
etout
.
Émis lorsque l'utilisateur demande à changer le niveau de zoom en utilisant la molette de la souris.
Événement : 'blur'
Émis lorsque le WebContents
perd le focus.
Événement : 'focus'
Émis lorsque le WebContents
acquiert le focus.
Notez que sur macOS, le fait d’avoir le focus signifie que le WebContents
est le premier intervenant de la fenêtre, de sorte que le basculement du focus entre les fenêtres ne déclenche pas les événements focus
et blur
de WebContents
, car le premier intervenant de chaque fenêtre n’est pas modifié.
Les événements focus
et blur
de WebContents
ne doivent être utilisés que pour détecter changement de focus entre différents WebContents
et BrowserView
dans la même fenêtre. .
Événement : 'devtools-opened'
Retourne :
event
Eventurl
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
Eventquery
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.