diff --git a/docs/breaking-changes.md b/docs/breaking-changes.md index 68cf3d4e0481..ab473fc43e6b 100644 --- a/docs/breaking-changes.md +++ b/docs/breaking-changes.md @@ -278,6 +278,39 @@ webContents.setWindowOpenHandler((details) => { }) ``` +### Removed: `` `new-window` event + +The `new-window` event of `` has been removed. There is no direct replacement. + +```js +// Removed in Electron 22 +webview.addEventListener('new-window', (event) => {}) +``` + +```javascript fiddle='docs/fiddles/ipc/webview-new-window' +// Replace with + +// main.js +mainWindow.webContents.on('did-attach-webview', (event, wc) => { + wc.setWindowOpenHandler((details) => { + mainWindow.webContents.send('webview-new-window', wc.id, details) + return { action: 'deny' } + }) +}) + +// preload.js +const { ipcRenderer } = require('electron') +ipcRenderer.on('webview-new-window', (e, webContentsId, details) => { + console.log('webview-new-window', webContentsId, details) + document.getElementById('webview').dispatchEvent(new Event('new-window')) +}) + +// renderer.js +document.getElementById('webview').addEventListener('new-window', () => { + console.log('got new-window event') +}) +``` + ### Deprecated: BrowserWindow `scroll-touch-*` events The `scroll-touch-begin`, `scroll-touch-end` and `scroll-touch-edge` events on diff --git a/docs/fiddles/ipc/webview-new-window/child.html b/docs/fiddles/ipc/webview-new-window/child.html new file mode 100644 index 000000000000..90c94376c284 --- /dev/null +++ b/docs/fiddles/ipc/webview-new-window/child.html @@ -0,0 +1,3 @@ + + new window + diff --git a/docs/fiddles/ipc/webview-new-window/index.html b/docs/fiddles/ipc/webview-new-window/index.html new file mode 100644 index 000000000000..8b461bd15f83 --- /dev/null +++ b/docs/fiddles/ipc/webview-new-window/index.html @@ -0,0 +1,4 @@ + + + + diff --git a/docs/fiddles/ipc/webview-new-window/main.js b/docs/fiddles/ipc/webview-new-window/main.js new file mode 100644 index 000000000000..cab3b1ec1b65 --- /dev/null +++ b/docs/fiddles/ipc/webview-new-window/main.js @@ -0,0 +1,51 @@ +// Modules to control application life and create native browser window +const { app, BrowserWindow } = require('electron') +const path = require('path') + +function createWindow () { + // Create the browser window. + const mainWindow = new BrowserWindow({ + width: 800, + height: 600, + webPreferences: { + preload: path.join(__dirname, 'preload.js'), + webviewTag: true + } + }) + + mainWindow.webContents.on('did-attach-webview', (event, wc) => { + wc.setWindowOpenHandler((details) => { + mainWindow.webContents.send('webview-new-window', wc.id, details) + return { action: 'deny' } + }) + }) + + // and load the index.html of the app. + mainWindow.loadFile('index.html') + + // Open the DevTools. + // mainWindow.webContents.openDevTools() +} + +// This method will be called when Electron has finished +// initialization and is ready to create browser windows. +// Some APIs can only be used after this event occurs. +app.whenReady().then(() => { + createWindow() + + app.on('activate', function () { + // On macOS it's common to re-create a window in the app when the + // dock icon is clicked and there are no other windows open. + if (BrowserWindow.getAllWindows().length === 0) createWindow() + }) +}) + +// Quit when all windows are closed, except on macOS. There, it's common +// for applications and their menu bar to stay active until the user quits +// explicitly with Cmd + Q. +app.on('window-all-closed', function () { + if (process.platform !== 'darwin') app.quit() +}) + +// In this file you can include the rest of your app's specific main process +// code. You can also put them in separate files and require them here. diff --git a/docs/fiddles/ipc/webview-new-window/preload.js b/docs/fiddles/ipc/webview-new-window/preload.js new file mode 100644 index 000000000000..5b5b6e70a626 --- /dev/null +++ b/docs/fiddles/ipc/webview-new-window/preload.js @@ -0,0 +1,6 @@ +const { ipcRenderer } = require('electron') +const webview = document.getElementById('webview') +ipcRenderer.on('webview-new-window', (e, webContentsId, details) => { + console.log('webview-new-window', webContentsId, details) + webview.dispatchEvent(new Event('new-window')) +}) diff --git a/docs/fiddles/ipc/webview-new-window/renderer.js b/docs/fiddles/ipc/webview-new-window/renderer.js new file mode 100644 index 000000000000..e62d0b4d17bc --- /dev/null +++ b/docs/fiddles/ipc/webview-new-window/renderer.js @@ -0,0 +1,4 @@ +const webview = document.getElementById('webview') +webview.addEventListener('new-window', () => { + console.log('got new-window event') +})