diff --git a/docs/api/app.md b/docs/api/app.md index 9c690899a3..cd566c8dc5 100644 --- a/docs/api/app.md +++ b/docs/api/app.md @@ -501,7 +501,7 @@ Returns: Emitted when `desktopCapturer.getSources()` is called in the renderer process of `webContents`. Calling `event.preventDefault()` will make it return empty sources. -### Event: 'remote-require' +### Event: 'remote-require' _Deprecated_ Returns: @@ -513,7 +513,7 @@ Emitted when `remote.require()` is called in the renderer process of `webContent Calling `event.preventDefault()` will prevent the module from being returned. Custom value can be returned by setting `event.returnValue`. -### Event: 'remote-get-global' +### Event: 'remote-get-global' _Deprecated_ Returns: @@ -525,7 +525,7 @@ Emitted when `remote.getGlobal()` is called in the renderer process of `webConte Calling `event.preventDefault()` will prevent the global from being returned. Custom value can be returned by setting `event.returnValue`. -### Event: 'remote-get-builtin' +### Event: 'remote-get-builtin' _Deprecated_ Returns: @@ -537,7 +537,7 @@ Emitted when `remote.getBuiltin()` is called in the renderer process of `webCont Calling `event.preventDefault()` will prevent the module from being returned. Custom value can be returned by setting `event.returnValue`. -### Event: 'remote-get-current-window' +### Event: 'remote-get-current-window' _Deprecated_ Returns: @@ -548,7 +548,7 @@ Emitted when `remote.getCurrentWindow()` is called in the renderer process of `w Calling `event.preventDefault()` will prevent the object from being returned. Custom value can be returned by setting `event.returnValue`. -### Event: 'remote-get-current-web-contents' +### Event: 'remote-get-current-web-contents' _Deprecated_ Returns: diff --git a/docs/api/browser-window.md b/docs/api/browser-window.md index 8889656f54..f00179ca9c 100644 --- a/docs/api/browser-window.md +++ b/docs/api/browser-window.md @@ -8,9 +8,6 @@ Process: [Main](../glossary.md#main-process) // In the main process. const { BrowserWindow } = require('electron') -// Or use `remote` from the renderer process. -// const { BrowserWindow } = require('electron').remote - const win = new BrowserWindow({ width: 800, height: 600 }) // Load a remote URL diff --git a/docs/api/dialog.md b/docs/api/dialog.md index d12f72b73a..a0ed591d8c 100644 --- a/docs/api/dialog.md +++ b/docs/api/dialog.md @@ -11,14 +11,6 @@ const { dialog } = require('electron') console.log(dialog.showOpenDialog({ properties: ['openFile', 'multiSelections'] })) ``` -The Dialog is opened from Electron's main thread. If you want to use the dialog -object from a renderer process, remember to access it using the remote: - -```javascript -const { dialog } = require('electron').remote -console.log(dialog) -``` - ## Methods The `dialog` module has the following methods: diff --git a/docs/api/frameless-window.md b/docs/api/frameless-window.md index 48a41d6be2..fcdb1cc5d2 100644 --- a/docs/api/frameless-window.md +++ b/docs/api/frameless-window.md @@ -112,13 +112,19 @@ optional parameter can be used to forward mouse move messages to the web page, allowing events such as `mouseleave` to be emitted: ```javascript -const win = require('electron').remote.getCurrentWindow() +const { ipcRenderer } = require('electron') const el = document.getElementById('clickThroughElement') el.addEventListener('mouseenter', () => { - win.setIgnoreMouseEvents(true, { forward: true }) + ipcRenderer.send('set-ignore-mouse-events', true, { forward: true }) }) el.addEventListener('mouseleave', () => { - win.setIgnoreMouseEvents(false) + ipcRenderer.send('set-ignore-mouse-events', false) +}) + +// Main process +const { ipcMain } = require('electron') +ipcMain.on('set-ignore-mouse-events', (event, ...args) => { + BrowserWindow.fromWebContents(event.sender).setIgnoreMouseEvents(...args) }) ``` diff --git a/docs/api/sandbox-option.md b/docs/api/sandbox-option.md index 9503dd8a4c..da8b530911 100644 --- a/docs/api/sandbox-option.md +++ b/docs/api/sandbox-option.md @@ -88,26 +88,17 @@ and preload.js: ```js // This file is loaded whenever a javascript context is created. It runs in a -// private scope that can access a subset of Electron renderer APIs. We must be -// careful to not leak any objects into the global scope! -const { ipcRenderer, remote } = require('electron') -const fs = remote.require('fs') - -// read a configuration file using the `fs` module -const buf = fs.readFileSync('allowed-popup-urls.json') -const allowedUrls = JSON.parse(buf.toString('utf8')) +// private scope that can access a subset of Electron renderer APIs. Without +// contextIsolation enabled, it's possible to accidentally leak privileged +// globals like ipcRenderer to web content. +const { ipcRenderer } = require('electron') const defaultWindowOpen = window.open -function customWindowOpen (url, ...args) { - if (allowedUrls.indexOf(url) === -1) { - ipcRenderer.sendSync('blocked-popup-notification', location.origin, url) - return null - } - return defaultWindowOpen(url, ...args) +window.open = function customWindowOpen (url, ...args) { + ipcRenderer.send('report-window-open', location.origin, url, args) + return defaultWindowOpen(url + '?from_electron=1', ...args) } - -window.open = customWindowOpen ``` Important things to notice in the preload script: @@ -115,8 +106,6 @@ Important things to notice in the preload script: - Even though the sandboxed renderer doesn't have Node.js running, it still has access to a limited node-like environment: `Buffer`, `process`, `setImmediate`, `clearImmediate` and `require` are available. -- The preload script can indirectly access all APIs from the main process through the - `remote` and `ipcRenderer` modules. - The preload script must be contained in a single script, but it is possible to have complex preload code composed with multiple modules by using a tool like webpack or browserify. An example of using browserify is below. @@ -144,15 +133,12 @@ following modules: - `desktopCapturer` - `ipcRenderer` - `nativeImage` - - `remote` - `webFrame` - `events` - `timers` - `url` -More may be added as needed to expose more Electron APIs in the sandbox, but any -module in the main process can already be used through -`electron.remote.require`. +More may be added as needed to expose more Electron APIs in the sandbox. ## Rendering untrusted content diff --git a/docs/api/synopsis.md b/docs/api/synopsis.md index 6ee64e6762..535e08caa1 100644 --- a/docs/api/synopsis.md +++ b/docs/api/synopsis.md @@ -9,7 +9,7 @@ the [native modules](../tutorial/using-native-node-modules.md)). Electron also provides some extra built-in modules for developing native desktop applications. Some modules are only available in the main process, some are only available in the renderer process (web page), and some can be used in -both processes. +either process type. The basic rule is: if a module is [GUI][gui] or low-level system related, then it should be only available in the main process. You need to be familiar with @@ -29,15 +29,15 @@ app.whenReady().then(() => { ``` The renderer process is no different than a normal web page, except for the -extra ability to use node modules: +extra ability to use node modules if `nodeIntegration` is enabled: ```html diff --git a/docs/api/web-contents.md b/docs/api/web-contents.md index 7380529fca..59d8e55b80 100644 --- a/docs/api/web-contents.md +++ b/docs/api/web-contents.md @@ -784,7 +784,7 @@ Returns: Emitted when `desktopCapturer.getSources()` is called in the renderer process. Calling `event.preventDefault()` will make it return empty sources. -#### Event: 'remote-require' +#### Event: 'remote-require' _Deprecated_ Returns: @@ -795,7 +795,7 @@ Emitted when `remote.require()` is called in the renderer process. Calling `event.preventDefault()` will prevent the module from being returned. Custom value can be returned by setting `event.returnValue`. -#### Event: 'remote-get-global' +#### Event: 'remote-get-global' _Deprecated_ Returns: @@ -806,7 +806,7 @@ Emitted when `remote.getGlobal()` is called in the renderer process. Calling `event.preventDefault()` will prevent the global from being returned. Custom value can be returned by setting `event.returnValue`. -#### Event: 'remote-get-builtin' +#### Event: 'remote-get-builtin' _Deprecated_ Returns: @@ -817,7 +817,7 @@ Emitted when `remote.getBuiltin()` is called in the renderer process. Calling `event.preventDefault()` will prevent the module from being returned. Custom value can be returned by setting `event.returnValue`. -#### Event: 'remote-get-current-window' +#### Event: 'remote-get-current-window' _Deprecated_ Returns: @@ -827,7 +827,7 @@ Emitted when `remote.getCurrentWindow()` is called in the renderer process. Calling `event.preventDefault()` will prevent the object from being returned. Custom value can be returned by setting `event.returnValue`. -#### Event: 'remote-get-current-web-contents' +#### Event: 'remote-get-current-web-contents' _Deprecated_ Returns: @@ -1457,7 +1457,7 @@ An example of showing devtools in a `` tag: ``` +```js +// Main process +const { ipcMain, webContents } = require('electron') +ipcMain.on('open-devtools', (event, targetContentsId, devtoolsContentsId) => { + const target = webContents.fromId(targetContentsId) + const devtools = webContents.fromId(devtoolsContentsId) + target.setDevToolsWebContents(devtools) + target.openDevTools() +}) +``` + An example of showing devtools in a `BrowserWindow`: ```js diff --git a/docs/api/webview-tag.md b/docs/api/webview-tag.md index b7fab619fa..cdef0d4737 100644 --- a/docs/api/webview-tag.md +++ b/docs/api/webview-tag.md @@ -137,7 +137,7 @@ This option is disabled by default in the guest page. ``` A `Boolean`. When this attribute is `false` the guest page in `webview` will not have access -to the [`remote`](remote.md) module. The remote module is available by default. +to the [`remote`](remote.md) module. The remote module is unavailable by default. ### `plugins` diff --git a/docs/development/debug-instructions-windows.md b/docs/development/debug-instructions-windows.md index d8ab5f123a..f53c34d472 100644 --- a/docs/development/debug-instructions-windows.md +++ b/docs/development/debug-instructions-windows.md @@ -69,8 +69,7 @@ way of figuring out which is which. ### Which Process Should I Attach to? Code executed within the main process (that is, code found in or eventually run -by your main JavaScript file) as well as code called using the remote -(`require('electron').remote`) will run inside the main process, while other +by your main JavaScript file) will run inside the main process, while other code will execute inside its respective renderer process. You can be attached to multiple programs when you are debugging, but only one diff --git a/docs/fiddles/media/screenshot/take-screenshot/main.js b/docs/fiddles/media/screenshot/take-screenshot/main.js index a08035b335..be8ed98328 100644 --- a/docs/fiddles/media/screenshot/take-screenshot/main.js +++ b/docs/fiddles/media/screenshot/take-screenshot/main.js @@ -1,7 +1,11 @@ -const { BrowserWindow, app } = require('electron') +const { BrowserWindow, app, screen, ipcMain } = require('electron') let mainWindow = null +ipcMain.handle('get-screen-size', () => { + return screen.getPrimaryDisplay().workAreaSize +}) + function createWindow () { const windowOptions = { width: 600, diff --git a/docs/fiddles/media/screenshot/take-screenshot/renderer.js b/docs/fiddles/media/screenshot/take-screenshot/renderer.js index 144e7827a2..e7988f5067 100644 --- a/docs/fiddles/media/screenshot/take-screenshot/renderer.js +++ b/docs/fiddles/media/screenshot/take-screenshot/renderer.js @@ -1,5 +1,4 @@ -const { desktopCapturer } = require('electron') -const { screen, shell } = require('electron').remote +const { desktopCapturer, shell, ipcRenderer } = require('electron') const fs = require('fs') const os = require('os') @@ -8,9 +7,9 @@ const path = require('path') const screenshot = document.getElementById('screen-shot') const screenshotMsg = document.getElementById('screenshot-path') -screenshot.addEventListener('click', (event) => { +screenshot.addEventListener('click', async (event) => { screenshotMsg.textContent = 'Gathering screens...' - const thumbSize = determineScreenShotSize() + const thumbSize = await determineScreenShotSize() const options = { types: ['screen'], thumbnailSize: thumbSize } desktopCapturer.getSources(options, (error, sources) => { @@ -33,8 +32,8 @@ screenshot.addEventListener('click', (event) => { }) }) -function determineScreenShotSize () { - const screenSize = screen.getPrimaryDisplay().workAreaSize +async function determineScreenShotSize () { + const screenSize = await ipcRenderer.invoke('get-screen-size') const maxDimension = Math.max(screenSize.width, screenSize.height) return { width: maxDimension * window.devicePixelRatio, diff --git a/docs/fiddles/windows/manage-windows/create-frameless-window/main.js b/docs/fiddles/windows/manage-windows/create-frameless-window/main.js index 355f3591f8..05d530736a 100644 --- a/docs/fiddles/windows/manage-windows/create-frameless-window/main.js +++ b/docs/fiddles/windows/manage-windows/create-frameless-window/main.js @@ -1,23 +1,20 @@ -const { app, BrowserWindow } = require('electron') +const { app, BrowserWindow, ipcMain } = require('electron') -let mainWindow = null +ipcMain.on('create-frameless-window', (event, {url}) => { + const win = new BrowserWindow({ frame: false }) + win.loadURL(url) +}) function createWindow () { - const windowOptions = { + const mainWindow = new BrowserWindow({ width: 600, height: 400, title: 'Create a frameless window', webPreferences: { nodeIntegration: true } - } - - mainWindow = new BrowserWindow(windowOptions) - mainWindow.loadFile('index.html') - - mainWindow.on('closed', () => { - mainWindow = null }) + mainWindow.loadFile('index.html') } app.whenReady().then(() => { diff --git a/docs/fiddles/windows/manage-windows/create-frameless-window/renderer.js b/docs/fiddles/windows/manage-windows/create-frameless-window/renderer.js index 7f7ed322ff..21f91ad561 100644 --- a/docs/fiddles/windows/manage-windows/create-frameless-window/renderer.js +++ b/docs/fiddles/windows/manage-windows/create-frameless-window/renderer.js @@ -1,12 +1,8 @@ -const { BrowserWindow } = require('electron').remote +const { ipcRenderer } = require('electron') const newWindowBtn = document.getElementById('frameless-window') -newWindowBtn.addEventListener('click', (event) => { - let win = new BrowserWindow({ frame: false }) - - win.on('close', () => { win = null }) - - win.loadURL('data:text/html,

Hello World!

Close this Window') - win.show() +newWindowBtn.addEventListener('click', () => { + const url = 'data:text/html,

Hello World!

Close this Window' + ipcRenderer.send('create-frameless-window', { url }) }) diff --git a/docs/fiddles/windows/manage-windows/frameless-window/main.js b/docs/fiddles/windows/manage-windows/frameless-window/main.js index 6291dcad9c..d7925cd7ff 100644 --- a/docs/fiddles/windows/manage-windows/frameless-window/main.js +++ b/docs/fiddles/windows/manage-windows/frameless-window/main.js @@ -1,13 +1,14 @@ // Modules to control application life and create native browser window const { app, BrowserWindow } = require('electron') -// Keep a global reference of the window object, if you don't, the window will -// be closed automatically when the JavaScript object is garbage collected. -let mainWindow +ipcMain.on('create-frameless-window', (event, {url}) => { + const win = new BrowserWindow({ frame: false }) + win.loadURL(url) +}) function createWindow () { // Create the browser window. - mainWindow = new BrowserWindow({ + const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { @@ -17,17 +18,6 @@ function createWindow () { // and load the index.html of the app. mainWindow.loadFile('index.html') - - // Open the DevTools. - // mainWindow.webContents.openDevTools() - - // Emitted when the window is closed. - mainWindow.on('closed', function () { - // Dereference the window object, usually you would store windows - // in an array if your app supports multi windows, this is the time - // when you should delete the corresponding element. - mainWindow = null - }) } // This method will be called when Electron has finished diff --git a/docs/fiddles/windows/manage-windows/frameless-window/renderer.js b/docs/fiddles/windows/manage-windows/frameless-window/renderer.js index 89550c0e08..21f91ad561 100644 --- a/docs/fiddles/windows/manage-windows/frameless-window/renderer.js +++ b/docs/fiddles/windows/manage-windows/frameless-window/renderer.js @@ -1,25 +1,8 @@ -const { BrowserWindow } = require('electron').remote -const shell = require('electron').shell +const { ipcRenderer } = require('electron') -const framelessWindowBtn = document.getElementById('frameless-window') +const newWindowBtn = document.getElementById('frameless-window') -const links = document.querySelectorAll('a[href]') - -framelessWindowBtn.addEventListener('click', (event) => { - const modalPath = 'https://electronjs.org' - let win = new BrowserWindow({ frame: false }) - - win.on('close', () => { win = null }) - win.loadURL(modalPath) - win.show() -}) - -Array.prototype.forEach.call(links, (link) => { - const url = link.getAttribute('href') - if (url.indexOf('http') === 0) { - link.addEventListener('click', (e) => { - e.preventDefault() - shell.openExternal(url) - }) - } +newWindowBtn.addEventListener('click', () => { + const url = 'data:text/html,

Hello World!

Close this Window' + ipcRenderer.send('create-frameless-window', { url }) }) diff --git a/docs/fiddles/windows/manage-windows/manage-window-state/main.js b/docs/fiddles/windows/manage-windows/manage-window-state/main.js index 6291dcad9c..166ff0fa62 100644 --- a/docs/fiddles/windows/manage-windows/manage-window-state/main.js +++ b/docs/fiddles/windows/manage-windows/manage-window-state/main.js @@ -1,9 +1,20 @@ // Modules to control application life and create native browser window -const { app, BrowserWindow } = require('electron') +const { app, BrowserWindow, ipcMain } = require('electron') -// Keep a global reference of the window object, if you don't, the window will -// be closed automatically when the JavaScript object is garbage collected. -let mainWindow +ipcMain.on('create-demo-window', (event) => { + const win = new BrowserWindow({ width: 400, height: 275 }) + + function updateReply() { + event.sender.send('bounds-changed', { + size: win.getSize(), + position: win.getPosition() + }) + } + + win.on('resize', updateReply) + win.on('move', updateReply) + win.loadURL('https://electronjs.org') +}) function createWindow () { // Create the browser window. @@ -17,17 +28,6 @@ function createWindow () { // and load the index.html of the app. mainWindow.loadFile('index.html') - - // Open the DevTools. - // mainWindow.webContents.openDevTools() - - // Emitted when the window is closed. - mainWindow.on('closed', function () { - // Dereference the window object, usually you would store windows - // in an array if your app supports multi windows, this is the time - // when you should delete the corresponding element. - mainWindow = null - }) } // This method will be called when Electron has finished diff --git a/docs/fiddles/windows/manage-windows/manage-window-state/renderer.js b/docs/fiddles/windows/manage-windows/manage-window-state/renderer.js index 5f69fc0282..7b1aa8ae23 100644 --- a/docs/fiddles/windows/manage-windows/manage-window-state/renderer.js +++ b/docs/fiddles/windows/manage-windows/manage-window-state/renderer.js @@ -1,27 +1,17 @@ -const { BrowserWindow } = require('electron').remote -const shell = require('electron').shell +const { shell, ipcRenderer } = require('electron') const manageWindowBtn = document.getElementById('manage-window') const links = document.querySelectorAll('a[href]') -let win +ipcRenderer.on('bounds-changed', (event, bounds) => { + const manageWindowReply = document.getElementById('manage-window-reply') + const message = `Size: ${bounds.size} Position: ${bounds.position}` + manageWindowReply.textContent = message +}) manageWindowBtn.addEventListener('click', (event) => { - const modalPath = 'https://electronjs.org' - win = new BrowserWindow({ width: 400, height: 275 }) - - win.on('resize', updateReply) - win.on('move', updateReply) - win.on('close', () => { win = null }) - win.loadURL(modalPath) - win.show() - - function updateReply () { - const manageWindowReply = document.getElementById('manage-window-reply') - const message = `Size: ${win.getSize()} Position: ${win.getPosition()}` - manageWindowReply.innerText = message - } + ipcRenderer.send('create-demo-window') }) Array.prototype.forEach.call(links, (link) => { diff --git a/docs/fiddles/windows/manage-windows/new-window/index.html b/docs/fiddles/windows/manage-windows/new-window/index.html index e199b2552b..08fbcab03c 100644 --- a/docs/fiddles/windows/manage-windows/new-window/index.html +++ b/docs/fiddles/windows/manage-windows/new-window/index.html @@ -7,7 +7,7 @@

Create a new window

Supports: Win, macOS, Linux | Process: Main

-

The BrowserWindow module gives you the ability to create new windows in your app. This main process module can be used from the renderer process with the remote module, as is shown in this demo.

+

The BrowserWindow module gives you the ability to create new windows in your app.

There are a lot of options when creating a new window. A few are in this demo, but visit the documentation(opens in new window)

ProTip

diff --git a/docs/fiddles/windows/manage-windows/new-window/main.js b/docs/fiddles/windows/manage-windows/new-window/main.js index 6291dcad9c..2e51387e37 100644 --- a/docs/fiddles/windows/manage-windows/new-window/main.js +++ b/docs/fiddles/windows/manage-windows/new-window/main.js @@ -1,13 +1,14 @@ // Modules to control application life and create native browser window -const { app, BrowserWindow } = require('electron') +const { app, BrowserWindow, ipcMain } = require('electron') -// Keep a global reference of the window object, if you don't, the window will -// be closed automatically when the JavaScript object is garbage collected. -let mainWindow +ipcMain.on('new-window', (event, { url, width, height }) => { + const win = new BrowserWindow({ width, height }) + win.loadURL(url) +}) function createWindow () { // Create the browser window. - mainWindow = new BrowserWindow({ + const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { @@ -17,17 +18,6 @@ function createWindow () { // and load the index.html of the app. mainWindow.loadFile('index.html') - - // Open the DevTools. - // mainWindow.webContents.openDevTools() - - // Emitted when the window is closed. - mainWindow.on('closed', function () { - // Dereference the window object, usually you would store windows - // in an array if your app supports multi windows, this is the time - // when you should delete the corresponding element. - mainWindow = null - }) } // This method will be called when Electron has finished diff --git a/docs/fiddles/windows/manage-windows/new-window/renderer.js b/docs/fiddles/windows/manage-windows/new-window/renderer.js index 43423e8459..ccb8b22643 100644 --- a/docs/fiddles/windows/manage-windows/new-window/renderer.js +++ b/docs/fiddles/windows/manage-windows/new-window/renderer.js @@ -1,16 +1,11 @@ -const { BrowserWindow } = require('electron').remote -const { shell } = require('electron').remote +const { shell, ipcRenderer } = require('electron') const newWindowBtn = document.getElementById('new-window') const link = document.getElementById('browser-window-link') newWindowBtn.addEventListener('click', (event) => { - - let win = new BrowserWindow({ width: 400, height: 320 }) - - win.on('close', () => { win = null }) - win.loadURL('https://electronjs.org') - win.show() + const url = 'https://electronjs.org' + ipcRenderer.send('new-window', { url, width: 400, height: 320 }); }) link.addEventListener('click', (e) => { diff --git a/docs/fiddles/windows/manage-windows/window-events/main.js b/docs/fiddles/windows/manage-windows/window-events/main.js index 6291dcad9c..3effec304f 100644 --- a/docs/fiddles/windows/manage-windows/window-events/main.js +++ b/docs/fiddles/windows/manage-windows/window-events/main.js @@ -1,13 +1,9 @@ // Modules to control application life and create native browser window -const { app, BrowserWindow } = require('electron') - -// Keep a global reference of the window object, if you don't, the window will -// be closed automatically when the JavaScript object is garbage collected. -let mainWindow +const { app, BrowserWindow, ipcMain } = require('electron') function createWindow () { // Create the browser window. - mainWindow = new BrowserWindow({ + const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { @@ -18,15 +14,27 @@ function createWindow () { // and load the index.html of the app. mainWindow.loadFile('index.html') - // Open the DevTools. - // mainWindow.webContents.openDevTools() + let demoWindow + ipcMain.on('show-demo-window', () => { + if (demoWindow) { + demoWindow.focus() + return + } + demoWindow = new BrowserWindow({ width: 600, height: 400 }) + demoWindow.loadURL('https://electronjs.org') + demoWindow.on('close', () => { + mainWindow.webContents.send('window-close') + }) + demoWindow.on('focus', () => { + mainWindow.webContents.send('window-focus') + }) + demoWindow.on('blur', () => { + mainWindow.webContents.send('window-blur') + }) + }) - // Emitted when the window is closed. - mainWindow.on('closed', function () { - // Dereference the window object, usually you would store windows - // in an array if your app supports multi windows, this is the time - // when you should delete the corresponding element. - mainWindow = null + ipcMain.on('focus-demo-window', () => { + if (demoWindow) demoWindow.focus() }) } diff --git a/docs/fiddles/windows/manage-windows/window-events/renderer.js b/docs/fiddles/windows/manage-windows/window-events/renderer.js index 1fac721267..575d283a61 100644 --- a/docs/fiddles/windows/manage-windows/window-events/renderer.js +++ b/docs/fiddles/windows/manage-windows/window-events/renderer.js @@ -1,42 +1,33 @@ -const { BrowserWindow } = require('electron').remote -const shell = require('electron').shell +const { shell, ipcRenderer } = require('electron') const listenToWindowBtn = document.getElementById('listen-to-window') const focusModalBtn = document.getElementById('focus-on-modal-window') -const links = document.querySelectorAll('a[href]') +const hideFocusBtn = () => { + focusModalBtn.classList.add('disappear') + focusModalBtn.classList.remove('smooth-appear') + focusModalBtn.removeEventListener('click', focusWindow) +} -let win +const showFocusBtn = (btn) => { + focusModalBtn.classList.add('smooth-appear') + focusModalBtn.classList.remove('disappear') + focusModalBtn.addEventListener('click', focusWindow) +} +const focusWindow = () => { + ipcRenderer.send('focus-demo-window') +} + +ipcRenderer.on('window-focus', hideFocusBtn) +ipcRenderer.on('window-close', hideFocusBtn) +ipcRenderer.on('window-blur', showFocusBtn) listenToWindowBtn.addEventListener('click', () => { - const modalPath = 'https://electronjs.org' - win = new BrowserWindow({ width: 600, height: 400 }) - - const hideFocusBtn = () => { - focusModalBtn.classList.add('disappear') - focusModalBtn.classList.remove('smooth-appear') - focusModalBtn.removeEventListener('click', clickHandler) - } - - const showFocusBtn = (btn) => { - if (!win) return - focusModalBtn.classList.add('smooth-appear') - focusModalBtn.classList.remove('disappear') - focusModalBtn.addEventListener('click', clickHandler) - } - - win.on('focus', hideFocusBtn) - win.on('blur', showFocusBtn) - win.on('close', () => { - hideFocusBtn() - win = null - }) - win.loadURL(modalPath) - win.show() - - const clickHandler = () => { win.focus() } + ipcRenderer.send('show-demo-window') }) +const links = document.querySelectorAll('a[href]') + Array.prototype.forEach.call(links, (link) => { const url = link.getAttribute('href') if (url.indexOf('http') === 0) { diff --git a/docs/tutorial/in-app-purchases.md b/docs/tutorial/in-app-purchases.md index 5295d1be9e..848ea6560c 100644 --- a/docs/tutorial/in-app-purchases.md +++ b/docs/tutorial/in-app-purchases.md @@ -26,7 +26,8 @@ To test In-App Purchase in development with Electron you'll have to change the ` Here is an example that shows how to use In-App Purchases in Electron. You'll have to replace the product ids by the identifiers of the products created with iTunes Connect (the identifier of `com.example.app.product1` is `product1`). Note that you have to listen to the `transactions-updated` event as soon as possible in your app. ```javascript -const { inAppPurchase } = require('electron').remote +// Main process +const { inAppPurchase } = require('electron') const PRODUCT_IDS = ['id1', 'id2'] // Listen for transactions as soon as possible. diff --git a/lib/browser/api/browser-window.ts b/lib/browser/api/browser-window.ts index 8a1bfe42fc..39af9e7632 100644 --- a/lib/browser/api/browser-window.ts +++ b/lib/browser/api/browser-window.ts @@ -92,11 +92,7 @@ BrowserWindow.getFocusedWindow = () => { }; BrowserWindow.fromWebContents = (webContents: WebContents) => { - for (const window of BrowserWindow.getAllWindows()) { - if (window.webContents && window.webContents.equal(webContents)) return window; - } - - return null; + return webContents.getOwnerBrowserWindow(); }; BrowserWindow.fromBrowserView = (browserView: BrowserView) => {