chore: type check JS in docs (#38423)
* build(deps): update @electron/lint-roller * chore: type check JS in docs * docs: add @ts-check and @ts-expect-error to code blocks * chore: fix type check errors in docs * chore: add ts-type to blocks
This commit is contained in:
parent
4c89061e0e
commit
905aad9cb6
49 changed files with 257 additions and 182 deletions
|
@ -971,7 +971,7 @@ app.setJumpList([
|
|||
title: 'Tool A',
|
||||
program: process.execPath,
|
||||
args: '--run-tool-a',
|
||||
icon: process.execPath,
|
||||
iconPath: process.execPath,
|
||||
iconIndex: 0,
|
||||
description: 'Runs Tool A'
|
||||
},
|
||||
|
@ -980,7 +980,7 @@ app.setJumpList([
|
|||
title: 'Tool B',
|
||||
program: process.execPath,
|
||||
args: '--run-tool-b',
|
||||
icon: process.execPath,
|
||||
iconPath: process.execPath,
|
||||
iconIndex: 0,
|
||||
description: 'Runs Tool B'
|
||||
}
|
||||
|
@ -1418,8 +1418,8 @@ const fs = require('fs')
|
|||
let filepath
|
||||
let bookmark
|
||||
|
||||
dialog.showOpenDialog(null, { securityScopedBookmarks: true }, (filepaths, bookmarks) => {
|
||||
filepath = filepaths[0]
|
||||
dialog.showOpenDialog(null, { securityScopedBookmarks: true }).then(({ filePaths, bookmarks }) => {
|
||||
filepath = filePaths[0]
|
||||
bookmark = bookmarks[0]
|
||||
fs.readFileSync(filepath)
|
||||
})
|
||||
|
|
|
@ -104,6 +104,7 @@ window, you have to set both `parent` and `modal` options:
|
|||
```javascript
|
||||
const { BrowserWindow } = require('electron')
|
||||
|
||||
const top = new BrowserWindow()
|
||||
const child = new BrowserWindow({ parent: top, modal: true, show: false })
|
||||
child.loadURL('https://github.com')
|
||||
child.once('ready-to-show', () => {
|
||||
|
@ -597,7 +598,7 @@ On Linux the setter is a no-op, although the getter returns `true`.
|
|||
|
||||
A `boolean` property that determines whether the window is excluded from the application’s Windows menu. `false` by default.
|
||||
|
||||
```js
|
||||
```js @ts-expect-error=[11]
|
||||
const win = new BrowserWindow({ height: 600, width: 600 })
|
||||
|
||||
const template = [
|
||||
|
@ -1200,6 +1201,9 @@ Node's [`url.format`](https://nodejs.org/api/url.html#url_url_format_urlobject)
|
|||
method:
|
||||
|
||||
```javascript
|
||||
const { BrowserWindow } = require('electron')
|
||||
const win = new BrowserWindow()
|
||||
|
||||
const url = require('url').format({
|
||||
protocol: 'file',
|
||||
slashes: true,
|
||||
|
@ -1213,6 +1217,9 @@ You can load a URL using a `POST` request with URL-encoded data by doing
|
|||
the following:
|
||||
|
||||
```javascript
|
||||
const { BrowserWindow } = require('electron')
|
||||
const win = new BrowserWindow()
|
||||
|
||||
win.loadURL('http://localhost:8000/post', {
|
||||
postData: [{
|
||||
type: 'rawData',
|
||||
|
|
|
@ -104,7 +104,7 @@ The `callback` function is expected to be called back with user credentials:
|
|||
* `username` string
|
||||
* `password` string
|
||||
|
||||
```javascript
|
||||
```javascript @ts-type={request:Electron.ClientRequest}
|
||||
request.on('login', (authInfo, callback) => {
|
||||
callback('username', 'password')
|
||||
})
|
||||
|
@ -113,7 +113,7 @@ request.on('login', (authInfo, callback) => {
|
|||
Providing empty credentials will cancel the request and report an authentication
|
||||
error on the response object:
|
||||
|
||||
```javascript
|
||||
```javascript @ts-type={request:Electron.ClientRequest}
|
||||
request.on('response', (response) => {
|
||||
console.log(`STATUS: ${response.statusCode}`)
|
||||
response.on('error', (error) => {
|
||||
|
|
|
@ -148,10 +148,7 @@ clipboard.
|
|||
```js
|
||||
const { clipboard } = require('electron')
|
||||
|
||||
clipboard.writeBookmark({
|
||||
text: 'https://electronjs.org',
|
||||
bookmark: 'Electron Homepage'
|
||||
})
|
||||
clipboard.writeBookmark('Electron Homepage', 'https://electronjs.org')
|
||||
```
|
||||
|
||||
### `clipboard.readFindText()` _macOS_
|
||||
|
|
|
@ -18,7 +18,7 @@ contextBridge.exposeInMainWorld(
|
|||
)
|
||||
```
|
||||
|
||||
```javascript
|
||||
```javascript @ts-nocheck
|
||||
// Renderer (Main World)
|
||||
|
||||
window.electron.doThing()
|
||||
|
@ -104,7 +104,7 @@ contextBridge.exposeInIsolatedWorld(
|
|||
)
|
||||
```
|
||||
|
||||
```javascript
|
||||
```javascript @ts-nocheck
|
||||
// Renderer (In isolated world id1004)
|
||||
|
||||
window.electron.doThing()
|
||||
|
|
|
@ -10,7 +10,9 @@ title is `Electron`:
|
|||
|
||||
```javascript
|
||||
// In the main process.
|
||||
const { desktopCapturer } = require('electron')
|
||||
const { BrowserWindow, desktopCapturer } = require('electron')
|
||||
|
||||
const mainWindow = new BrowserWindow()
|
||||
|
||||
desktopCapturer.getSources({ types: ['window', 'screen'] }).then(async sources => {
|
||||
for (const source of sources) {
|
||||
|
@ -22,7 +24,7 @@ desktopCapturer.getSources({ types: ['window', 'screen'] }).then(async sources =
|
|||
})
|
||||
```
|
||||
|
||||
```javascript
|
||||
```javascript @ts-nocheck
|
||||
// In the preload script.
|
||||
const { ipcRenderer } = require('electron')
|
||||
|
||||
|
|
|
@ -72,7 +72,7 @@ and a directory selector, so if you set `properties` to
|
|||
`['openFile', 'openDirectory']` on these platforms, a directory selector will be
|
||||
shown.
|
||||
|
||||
```js
|
||||
```js @ts-type={mainWindow:Electron.BrowserWindow}
|
||||
dialog.showOpenDialogSync(mainWindow, {
|
||||
properties: ['openFile', 'openDirectory']
|
||||
})
|
||||
|
@ -139,7 +139,7 @@ and a directory selector, so if you set `properties` to
|
|||
`['openFile', 'openDirectory']` on these platforms, a directory selector will be
|
||||
shown.
|
||||
|
||||
```js
|
||||
```js @ts-type={mainWindow:Electron.BrowserWindow}
|
||||
dialog.showOpenDialog(mainWindow, {
|
||||
properties: ['openFile', 'openDirectory']
|
||||
}).then(result => {
|
||||
|
|
|
@ -89,7 +89,7 @@ tuples. So, the even-numbered offsets are key values, and the odd-numbered
|
|||
offsets are the associated values. Header names are not lowercased, and
|
||||
duplicates are not merged.
|
||||
|
||||
```javascript
|
||||
```javascript @ts-type={response:Electron.IncomingMessage}
|
||||
// Prints something like:
|
||||
//
|
||||
// [ 'user-agent',
|
||||
|
@ -100,5 +100,5 @@ duplicates are not merged.
|
|||
// '127.0.0.1:8000',
|
||||
// 'ACCEPT',
|
||||
// '*/*' ]
|
||||
console.log(request.rawHeaders)
|
||||
console.log(response.rawHeaders)
|
||||
```
|
||||
|
|
|
@ -83,14 +83,14 @@ If `listener` returns a Promise, the eventual result of the promise will be
|
|||
returned as a reply to the remote caller. Otherwise, the return value of the
|
||||
listener will be used as the value of the reply.
|
||||
|
||||
```js title='Main Process'
|
||||
```js title='Main Process' @ts-type={somePromise:(...args:unknown[])=>Promise<unknown>}
|
||||
ipcMain.handle('my-invokable-ipc', async (event, ...args) => {
|
||||
const result = await somePromise(...args)
|
||||
return result
|
||||
})
|
||||
```
|
||||
|
||||
```js title='Renderer Process'
|
||||
```js title='Renderer Process' @ts-type={arg1:unknown} @ts-type={arg2:unknown}
|
||||
async () => {
|
||||
const result = await ipcRenderer.invoke('my-invokable-ipc', arg1, arg2)
|
||||
// ...
|
||||
|
|
|
@ -101,7 +101,7 @@ The main process should listen for `channel` with
|
|||
|
||||
For example:
|
||||
|
||||
```javascript
|
||||
```javascript @ts-type={someArgument:unknown} @ts-type={doSomeWork:(arg:unknown)=>Promise<unknown>}
|
||||
// Renderer process
|
||||
ipcRenderer.invoke('some-name', someArgument).then((result) => {
|
||||
// ...
|
||||
|
|
|
@ -147,7 +147,7 @@ can have a submenu.
|
|||
|
||||
An example of creating the application menu with the simple template API:
|
||||
|
||||
```javascript
|
||||
```javascript @ts-expect-error=[107]
|
||||
const { app, Menu } = require('electron')
|
||||
|
||||
const isMac = process.platform === 'darwin'
|
||||
|
@ -267,7 +267,7 @@ menu on behalf of the renderer.
|
|||
|
||||
Below is an example of showing a menu when the user right clicks the page:
|
||||
|
||||
```js
|
||||
```js @ts-expect-error=[21]
|
||||
// renderer
|
||||
window.addEventListener('contextmenu', (e) => {
|
||||
e.preventDefault()
|
||||
|
@ -289,7 +289,7 @@ ipcMain.on('show-context-menu', (event) => {
|
|||
{ label: 'Menu Item 2', type: 'checkbox', checked: true }
|
||||
]
|
||||
const menu = Menu.buildFromTemplate(template)
|
||||
menu.popup(BrowserWindow.fromWebContents(event.sender))
|
||||
menu.popup({ window: BrowserWindow.fromWebContents(event.sender) })
|
||||
})
|
||||
```
|
||||
|
||||
|
|
|
@ -17,7 +17,8 @@ Example:
|
|||
|
||||
```js
|
||||
// Main process
|
||||
const { MessageChannelMain } = require('electron')
|
||||
const { BrowserWindow, MessageChannelMain } = require('electron')
|
||||
const w = new BrowserWindow()
|
||||
const { port1, port2 } = new MessageChannelMain()
|
||||
w.webContents.postMessage('port', null, [port2])
|
||||
port1.postMessage({ some: 'message' })
|
||||
|
@ -26,9 +27,9 @@ port1.postMessage({ some: 'message' })
|
|||
const { ipcRenderer } = require('electron')
|
||||
ipcRenderer.on('port', (e) => {
|
||||
// e.ports is a list of ports sent along with this message
|
||||
e.ports[0].on('message', (messageEvent) => {
|
||||
e.ports[0].onmessage = (messageEvent) => {
|
||||
console.log(messageEvent.data)
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
Process: [Main](../glossary.md#main-process)
|
||||
|
||||
```javascript
|
||||
const { netLog } = require('electron')
|
||||
const { app, netLog } = require('electron')
|
||||
|
||||
app.whenReady().then(async () => {
|
||||
await netLog.startLogging('/path/to/net-log')
|
||||
|
|
|
@ -32,7 +32,7 @@ To have your custom protocol work in combination with a custom session, you need
|
|||
to register it to that session explicitly.
|
||||
|
||||
```javascript
|
||||
const { session, app, protocol } = require('electron')
|
||||
const { app, BrowserWindow, net, protocol, session } = require('electron')
|
||||
const path = require('path')
|
||||
const url = require('url')
|
||||
|
||||
|
@ -41,11 +41,11 @@ app.whenReady().then(() => {
|
|||
const ses = session.fromPartition(partition)
|
||||
|
||||
ses.protocol.handle('atom', (request) => {
|
||||
const path = request.url.slice('atom://'.length)
|
||||
return net.fetch(url.pathToFileURL(path.join(__dirname, path)))
|
||||
const filePath = request.url.slice('atom://'.length)
|
||||
return net.fetch(url.pathToFileURL(path.join(__dirname, filePath)).toString())
|
||||
})
|
||||
|
||||
mainWindow = new BrowserWindow({ webPreferences: { partition } })
|
||||
const mainWindow = new BrowserWindow({ webPreferences: { partition } })
|
||||
})
|
||||
```
|
||||
|
||||
|
@ -121,9 +121,9 @@ Either a `Response` or a `Promise<Response>` can be returned.
|
|||
Example:
|
||||
|
||||
```js
|
||||
import { app, protocol } from 'electron'
|
||||
import { join } from 'path'
|
||||
import { pathToFileURL } from 'url'
|
||||
const { app, net, protocol } = require('electron')
|
||||
const { join } = require('path')
|
||||
const { pathToFileURL } = require('url')
|
||||
|
||||
protocol.registerSchemesAsPrivileged([
|
||||
{
|
||||
|
@ -131,7 +131,7 @@ protocol.registerSchemesAsPrivileged([
|
|||
privileges: {
|
||||
standard: true,
|
||||
secure: true,
|
||||
supportsFetchAPI: true
|
||||
supportFetchAPI: true
|
||||
}
|
||||
}
|
||||
])
|
||||
|
@ -147,7 +147,7 @@ app.whenReady().then(() => {
|
|||
}
|
||||
// NB, this does not check for paths that escape the bundle, e.g.
|
||||
// app://bundle/../../secret_file.txt
|
||||
return net.fetch(pathToFileURL(join(__dirname, pathname)))
|
||||
return net.fetch(pathToFileURL(join(__dirname, pathname)).toString())
|
||||
} else if (host === 'api') {
|
||||
return net.fetch('https://api.my-server.com/' + pathname, {
|
||||
method: req.method,
|
||||
|
|
|
@ -98,7 +98,7 @@ Emitted when Electron is about to download `item` in `webContents`.
|
|||
Calling `event.preventDefault()` will cancel the download and `item` will not be
|
||||
available from next tick of the process.
|
||||
|
||||
```javascript
|
||||
```javascript @ts-expect-error=[4]
|
||||
const { session } = require('electron')
|
||||
session.defaultSession.on('will-download', (event, item, webContents) => {
|
||||
event.preventDefault()
|
||||
|
@ -214,7 +214,7 @@ cancel the request. Additionally, permissioning on `navigator.hid` can
|
|||
be further managed by using [`ses.setPermissionCheckHandler(handler)`](#sessetpermissioncheckhandlerhandler)
|
||||
and [`ses.setDevicePermissionHandler(handler)`](#sessetdevicepermissionhandlerhandler).
|
||||
|
||||
```javascript
|
||||
```javascript @ts-type={fetchGrantedDevices:()=>(Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)}
|
||||
const { app, BrowserWindow } = require('electron')
|
||||
|
||||
let win = null
|
||||
|
@ -253,7 +253,7 @@ app.whenReady().then(() => {
|
|||
win.webContents.session.on('select-hid-device', (event, details, callback) => {
|
||||
event.preventDefault()
|
||||
const selectedDevice = details.deviceList.find((device) => {
|
||||
return device.vendorId === '9025' && device.productId === '67'
|
||||
return device.vendorId === 9025 && device.productId === 67
|
||||
})
|
||||
callback(selectedDevice?.deviceId)
|
||||
})
|
||||
|
@ -320,7 +320,7 @@ cancel the request. Additionally, permissioning on `navigator.serial` can
|
|||
be managed by using [ses.setPermissionCheckHandler(handler)](#sessetpermissioncheckhandlerhandler)
|
||||
with the `serial` permission.
|
||||
|
||||
```javascript
|
||||
```javascript @ts-type={fetchGrantedDevices:()=>(Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)}
|
||||
const { app, BrowserWindow } = require('electron')
|
||||
|
||||
let win = null
|
||||
|
@ -463,7 +463,7 @@ cancel the request. Additionally, permissioning on `navigator.usb` can
|
|||
be further managed by using [`ses.setPermissionCheckHandler(handler)`](#sessetpermissioncheckhandlerhandler)
|
||||
and [`ses.setDevicePermissionHandler(handler)`](#sessetdevicepermissionhandlerhandler).
|
||||
|
||||
```javascript
|
||||
```javascript @ts-type={fetchGrantedDevices:()=>(Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)} @ts-type={updateGrantedDevices:(devices:Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)=>void}
|
||||
const { app, BrowserWindow } = require('electron')
|
||||
|
||||
let win = null
|
||||
|
@ -502,7 +502,7 @@ app.whenReady().then(() => {
|
|||
win.webContents.session.on('select-usb-device', (event, details, callback) => {
|
||||
event.preventDefault()
|
||||
const selectedDevice = details.deviceList.find((device) => {
|
||||
return device.vendorId === '9025' && device.productId === '67'
|
||||
return device.vendorId === 9025 && device.productId === 67
|
||||
})
|
||||
if (selectedDevice) {
|
||||
// Optionally, add this to the persisted devices (updateGrantedDevices needs to be implemented by developer to persist permissions)
|
||||
|
@ -755,15 +755,17 @@ Sets download saving directory. By default, the download directory will be the
|
|||
Emulates network with the given configuration for the `session`.
|
||||
|
||||
```javascript
|
||||
const win = new BrowserWindow()
|
||||
|
||||
// To emulate a GPRS connection with 50kbps throughput and 500 ms latency.
|
||||
window.webContents.session.enableNetworkEmulation({
|
||||
win.webContents.session.enableNetworkEmulation({
|
||||
latency: 500,
|
||||
downloadThroughput: 6400,
|
||||
uploadThroughput: 6400
|
||||
})
|
||||
|
||||
// To emulate a network outage.
|
||||
window.webContents.session.enableNetworkEmulation({ offline: true })
|
||||
win.webContents.session.enableNetworkEmulation({ offline: true })
|
||||
```
|
||||
|
||||
#### `ses.preconnect(options)`
|
||||
|
@ -1036,7 +1038,7 @@ Additionally, the default behavior of Electron is to store granted device permis
|
|||
If longer term storage is needed, a developer can store granted device
|
||||
permissions (eg when handling the `select-hid-device` event) and then read from that storage with `setDevicePermissionHandler`.
|
||||
|
||||
```javascript
|
||||
```javascript @ts-type={fetchGrantedDevices:()=>(Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)}
|
||||
const { app, BrowserWindow } = require('electron')
|
||||
|
||||
let win = null
|
||||
|
@ -1084,9 +1086,9 @@ app.whenReady().then(() => {
|
|||
win.webContents.session.on('select-hid-device', (event, details, callback) => {
|
||||
event.preventDefault()
|
||||
const selectedDevice = details.deviceList.find((device) => {
|
||||
return device.vendorId === '9025' && device.productId === '67'
|
||||
return device.vendorId === 9025 && device.productId === 67
|
||||
})
|
||||
callback(selectedPort?.deviceId)
|
||||
callback(selectedDevice?.deviceId)
|
||||
})
|
||||
})
|
||||
```
|
||||
|
@ -1174,32 +1176,32 @@ macOS does not require a handler because macOS handles the pairing
|
|||
automatically. To clear the handler, call `setBluetoothPairingHandler(null)`.
|
||||
|
||||
```javascript
|
||||
|
||||
const { app, BrowserWindow, ipcMain, session } = require('electron')
|
||||
|
||||
let bluetoothPinCallback = null
|
||||
const { app, BrowserWindow, session } = require('electron')
|
||||
const path = require('path')
|
||||
|
||||
function createWindow () {
|
||||
let bluetoothPinCallback = null
|
||||
|
||||
const mainWindow = new BrowserWindow({
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, 'preload.js')
|
||||
}
|
||||
})
|
||||
|
||||
mainWindow.webContents.session.setBluetoothPairingHandler((details, callback) => {
|
||||
bluetoothPinCallback = callback
|
||||
// Send a IPC message to the renderer to prompt the user to confirm the pairing.
|
||||
// Note that this will require logic in the renderer to handle this message and
|
||||
// display a prompt to the user.
|
||||
mainWindow.webContents.send('bluetooth-pairing-request', details)
|
||||
})
|
||||
|
||||
// Listen for an IPC message from the renderer to get the response for the Bluetooth pairing.
|
||||
mainWindow.webContents.ipc.on('bluetooth-pairing-response', (event, response) => {
|
||||
bluetoothPinCallback(response)
|
||||
})
|
||||
}
|
||||
|
||||
// Listen for an IPC message from the renderer to get the response for the Bluetooth pairing.
|
||||
ipcMain.on('bluetooth-pairing-response', (event, response) => {
|
||||
bluetoothPinCallback(response)
|
||||
})
|
||||
|
||||
mainWindow.webContents.session.setBluetoothPairingHandler((details, callback) => {
|
||||
bluetoothPinCallback = callback
|
||||
// Send a IPC message to the renderer to prompt the user to confirm the pairing.
|
||||
// Note that this will require logic in the renderer to handle this message and
|
||||
// display a prompt to the user.
|
||||
mainWindow.webContents.send('bluetooth-pairing-request', details)
|
||||
})
|
||||
|
||||
app.whenReady().then(() => {
|
||||
createWindow()
|
||||
})
|
||||
|
|
|
@ -87,12 +87,12 @@ const { TouchBarLabel, TouchBarButton, TouchBarSpacer } = TouchBar
|
|||
let spinning = false
|
||||
|
||||
// Reel labels
|
||||
const reel1 = new TouchBarLabel()
|
||||
const reel2 = new TouchBarLabel()
|
||||
const reel3 = new TouchBarLabel()
|
||||
const reel1 = new TouchBarLabel({ label: '' })
|
||||
const reel2 = new TouchBarLabel({ label: '' })
|
||||
const reel3 = new TouchBarLabel({ label: '' })
|
||||
|
||||
// Spin result label
|
||||
const result = new TouchBarLabel()
|
||||
const result = new TouchBarLabel({ label: '' })
|
||||
|
||||
// Spin button
|
||||
const spin = new TouchBarButton({
|
||||
|
|
|
@ -98,7 +98,7 @@ async function lookupTargetId (browserWindow) {
|
|||
await wc.debugger.attach('1.3')
|
||||
const { targetInfo } = await wc.debugger.sendCommand('Target.getTargetInfo')
|
||||
const { targetId } = targetInfo
|
||||
const targetWebContents = await webContents.fromDevToolsTargetId(targetId)
|
||||
const targetWebContents = await wc.fromDevToolsTargetId(targetId)
|
||||
}
|
||||
```
|
||||
|
||||
|
@ -1020,9 +1020,9 @@ e.g. the `http://` or `file://`. If the load should bypass http cache then
|
|||
use the `pragma` header to achieve it.
|
||||
|
||||
```javascript
|
||||
const { webContents } = require('electron')
|
||||
const win = new BrowserWindow()
|
||||
const options = { extraHeaders: 'pragma: no-cache\n' }
|
||||
webContents.loadURL('https://github.com', options)
|
||||
win.webContents.loadURL('https://github.com', options)
|
||||
```
|
||||
|
||||
#### `contents.loadFile(filePath[, options])`
|
||||
|
@ -1052,6 +1052,7 @@ an app structure like this:
|
|||
Would require code like this
|
||||
|
||||
```js
|
||||
const win = new BrowserWindow()
|
||||
win.loadFile('src/index.html')
|
||||
```
|
||||
|
||||
|
@ -1188,7 +1189,9 @@ when this process is unstable or unusable, for instance in order to recover
|
|||
from the `unresponsive` event.
|
||||
|
||||
```js
|
||||
contents.on('unresponsive', async () => {
|
||||
const win = new BrowserWindow()
|
||||
|
||||
win.webContents.on('unresponsive', async () => {
|
||||
const { response } = await dialog.showMessageBox({
|
||||
message: 'App X has become unresponsive',
|
||||
title: 'Do you want to try forcefully reloading the app?',
|
||||
|
@ -1196,8 +1199,8 @@ contents.on('unresponsive', async () => {
|
|||
cancelId: 1
|
||||
})
|
||||
if (response === 0) {
|
||||
contents.forcefullyCrashRenderer()
|
||||
contents.reload()
|
||||
win.webContents.forcefullyCrashRenderer()
|
||||
win.webContents.reload()
|
||||
}
|
||||
})
|
||||
```
|
||||
|
@ -1224,8 +1227,9 @@ Injects CSS into the current web page and returns a unique key for the inserted
|
|||
stylesheet.
|
||||
|
||||
```js
|
||||
contents.on('did-finish-load', () => {
|
||||
contents.insertCSS('html, body { background-color: #f00; }')
|
||||
const win = new BrowserWindow()
|
||||
win.webContents.on('did-finish-load', () => {
|
||||
win.webContents.insertCSS('html, body { background-color: #f00; }')
|
||||
})
|
||||
```
|
||||
|
||||
|
@ -1239,9 +1243,11 @@ Removes the inserted CSS from the current web page. The stylesheet is identified
|
|||
by its key, which is returned from `contents.insertCSS(css)`.
|
||||
|
||||
```js
|
||||
contents.on('did-finish-load', async () => {
|
||||
const key = await contents.insertCSS('html, body { background-color: #f00; }')
|
||||
contents.removeInsertedCSS(key)
|
||||
const win = new BrowserWindow()
|
||||
|
||||
win.webContents.on('did-finish-load', async () => {
|
||||
const key = await win.webContents.insertCSS('html, body { background-color: #f00; }')
|
||||
win.webContents.removeInsertedCSS(key)
|
||||
})
|
||||
```
|
||||
|
||||
|
@ -1262,7 +1268,9 @@ this limitation.
|
|||
Code execution will be suspended until web page stop loading.
|
||||
|
||||
```js
|
||||
contents.executeJavaScript('fetch("https://jsonplaceholder.typicode.com/users/1").then(resp => resp.json())', true)
|
||||
const win = new BrowserWindow()
|
||||
|
||||
win.webContents.executeJavaScript('fetch("https://jsonplaceholder.typicode.com/users/1").then(resp => resp.json())', true)
|
||||
.then((result) => {
|
||||
console.log(result) // Will be the JSON object from the fetch call
|
||||
})
|
||||
|
@ -1373,7 +1381,8 @@ Sets the maximum and minimum pinch-to-zoom level.
|
|||
> **NOTE**: Visual zoom is disabled by default in Electron. To re-enable it, call:
|
||||
>
|
||||
> ```js
|
||||
> contents.setVisualZoomLevelLimits(1, 3)
|
||||
> const win = new BrowserWindow()
|
||||
> win.webContents.setVisualZoomLevelLimits(1, 3)
|
||||
> ```
|
||||
|
||||
#### `contents.undo()`
|
||||
|
@ -1508,12 +1517,12 @@ can be obtained by subscribing to [`found-in-page`](web-contents.md#event-found-
|
|||
Stops any `findInPage` request for the `webContents` with the provided `action`.
|
||||
|
||||
```javascript
|
||||
const { webContents } = require('electron')
|
||||
webContents.on('found-in-page', (event, result) => {
|
||||
if (result.finalUpdate) webContents.stopFindInPage('clearSelection')
|
||||
const win = new BrowserWindow()
|
||||
win.webContents.on('found-in-page', (event, result) => {
|
||||
if (result.finalUpdate) win.webContents.stopFindInPage('clearSelection')
|
||||
})
|
||||
|
||||
const requestId = webContents.findInPage('api')
|
||||
const requestId = win.webContents.findInPage('api')
|
||||
console.log(requestId)
|
||||
```
|
||||
|
||||
|
@ -1593,6 +1602,7 @@ Use `page-break-before: always;` CSS style to force to print to a new page.
|
|||
Example usage:
|
||||
|
||||
```js
|
||||
const win = new BrowserWindow()
|
||||
const options = {
|
||||
silent: true,
|
||||
deviceName: 'My-Printer',
|
||||
|
@ -1889,8 +1899,9 @@ For example:
|
|||
|
||||
```js
|
||||
// Main process
|
||||
const win = new BrowserWindow()
|
||||
const { port1, port2 } = new MessageChannelMain()
|
||||
webContents.postMessage('port', { message: 'hello' }, [port1])
|
||||
win.webContents.postMessage('port', { message: 'hello' }, [port1])
|
||||
|
||||
// Renderer process
|
||||
ipcRenderer.on('port', (e, msg) => {
|
||||
|
|
|
@ -128,8 +128,9 @@ For example:
|
|||
|
||||
```js
|
||||
// Main process
|
||||
const win = new BrowserWindow()
|
||||
const { port1, port2 } = new MessageChannelMain()
|
||||
webContents.mainFrame.postMessage('port', { message: 'hello' }, [port1])
|
||||
win.webContents.mainFrame.postMessage('port', { message: 'hello' }, [port1])
|
||||
|
||||
// Renderer process
|
||||
ipcRenderer.on('port', (e, msg) => {
|
||||
|
|
|
@ -96,13 +96,12 @@ with an array of misspelt words when complete.
|
|||
|
||||
An example of using [node-spellchecker][spellchecker] as provider:
|
||||
|
||||
```javascript
|
||||
```javascript @ts-expect-error=[2,6]
|
||||
const { webFrame } = require('electron')
|
||||
const spellChecker = require('spellchecker')
|
||||
webFrame.setSpellCheckProvider('en-US', {
|
||||
spellCheck (words, callback) {
|
||||
setTimeout(() => {
|
||||
const spellchecker = require('spellchecker')
|
||||
const misspelled = words.filter(x => spellchecker.isMisspelled(x))
|
||||
callback(misspelled)
|
||||
}, 0)
|
||||
|
|
|
@ -255,7 +255,7 @@ The `webview` tag has the following methods:
|
|||
|
||||
**Example**
|
||||
|
||||
```javascript
|
||||
```javascript @ts-expect-error=[3]
|
||||
const webview = document.querySelector('webview')
|
||||
webview.addEventListener('dom-ready', () => {
|
||||
webview.openDevTools()
|
||||
|
@ -799,7 +799,7 @@ 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.
|
||||
|
||||
```javascript
|
||||
```javascript @ts-expect-error=[3]
|
||||
const webview = document.querySelector('webview')
|
||||
webview.addEventListener('console-message', (e) => {
|
||||
console.log('Guest page logged a message:', e.message)
|
||||
|
@ -820,7 +820,7 @@ Returns:
|
|||
Fired when a result is available for
|
||||
[`webview.findInPage`](#webviewfindinpagetext-options) request.
|
||||
|
||||
```javascript
|
||||
```javascript @ts-expect-error=[3,6]
|
||||
const webview = document.querySelector('webview')
|
||||
webview.addEventListener('found-in-page', (e) => {
|
||||
webview.stopFindInPage('keepSelection')
|
||||
|
@ -945,7 +945,7 @@ 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.
|
||||
|
||||
```javascript
|
||||
```javascript @ts-expect-error=[3]
|
||||
const webview = document.querySelector('webview')
|
||||
webview.addEventListener('close', () => {
|
||||
webview.src = 'about:blank'
|
||||
|
@ -965,7 +965,7 @@ 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:
|
||||
|
||||
```javascript
|
||||
```javascript @ts-expect-error=[4,7]
|
||||
// In embedder page.
|
||||
const webview = document.querySelector('webview')
|
||||
webview.addEventListener('ipc-message', (event) => {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue