docs: handle opening links in the default browser in main.js (#39379)

docs: handle opening links in the default browser in the main process

docs/fiddles/menus/customize-menus/main.js

@@ -312,6 +312,12 @@ function createWindow () {
     // when you should delete the corresponding element.
     mainWindow = null
   })
+
+  // Open external links in the default browser
+  mainWindow.webContents.on('will-navigate', (event, url) => {
+    event.preventDefault()
+    shell.openExternal(url)
+  })
 }
 
 // This method will be called when Electron has finished

docs/fiddles/menus/customize-menus/renderer.js

@@ -1,4 +1,4 @@
-const { ipcRenderer, shell } = require('electron')
+const { ipcRenderer } = require('electron')
 
 // Tell main process to show the menu when demo button is clicked
 const contextMenuBtn = document.getElementById('context-menu')
@@ -6,15 +6,3 @@ const contextMenuBtn = document.getElementById('context-menu')
 contextMenuBtn.addEventListener('click', () => {
   ipcRenderer.send('show-context-menu')
 })
-
-const links = document.querySelectorAll('a[href]')
-
-for (const link of links) {
-  const url = link.getAttribute('href')
-  if (url.indexOf('http') === 0) {
-    link.addEventListener('click', (e) => {
-      e.preventDefault()
-      shell.openExternal(url)
-    })
-  }
-}

docs/fiddles/menus/shortcuts/index.html

@@ -68,10 +68,6 @@
 			</div>
 		</div>
 	</div>
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
 </body>
 
 </html>

docs/fiddles/menus/shortcuts/main.js

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, globalShortcut, dialog } = require('electron')
+const { app, BrowserWindow, globalShortcut, dialog, shell } = 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.
@@ -38,6 +38,12 @@ function createWindow () {
     // when you should delete the corresponding element.
     mainWindow = null
   })
+
+  // Open external links in the default browser
+  mainWindow.webContents.on('will-navigate', (event, url) => {
+    event.preventDefault()
+    shell.openExternal(url)
+  })
 }
 
 // This method will be called when Electron has finished

docs/fiddles/menus/shortcuts/renderer.js

@@ -1,13 +0,0 @@
-const { shell } = require('electron')
-
-const links = document.querySelectorAll('a[href]')
-
-for (const link of links) {
-  const url = link.getAttribute('href')
-  if (url.indexOf('http') === 0) {
-    link.addEventListener('click', (e) => {
-      e.preventDefault()
-      shell.openExternal(url)
-    })
-  }
-}

docs/fiddles/native-ui/dialogs/error-dialog/main.js

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, dialog } = require('electron')
+const { app, BrowserWindow, ipcMain, dialog, shell } = 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.
@@ -29,6 +29,12 @@ function createWindow () {
     // when you should delete the corresponding element.
     mainWindow = null
   })
+
+  // Open external links in the default browser
+  mainWindow.webContents.on('will-navigate', (event, url) => {
+    event.preventDefault()
+    shell.openExternal(url)
+  })
 }
 
 // This method will be called when Electron has finished

docs/fiddles/native-ui/dialogs/error-dialog/renderer.js

@@ -1,18 +1,7 @@
-const { ipcRenderer, shell } = require('electron')
+const { ipcRenderer } = require('electron')
 
-const links = document.querySelectorAll('a[href]')
 const errorBtn = document.getElementById('error-dialog')
 
 errorBtn.addEventListener('click', event => {
   ipcRenderer.send('open-error-dialog')
 })
-
-for (const link of links) {
-  const url = link.getAttribute('href')
-  if (url.indexOf('http') === 0) {
-    link.addEventListener('click', (e) => {
-      e.preventDefault()
-      shell.openExternal(url)
-    })
-  }
-}

docs/fiddles/native-ui/dialogs/information-dialog/main.js

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, dialog } = require('electron')
+const { app, BrowserWindow, ipcMain, dialog, shell } = 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.
@@ -29,6 +29,12 @@ function createWindow () {
     // when you should delete the corresponding element.
     mainWindow = null
   })
+
+  // Open external links in the default browser
+  mainWindow.webContents.on('will-navigate', (event, url) => {
+    event.preventDefault()
+    shell.openExternal(url)
+  })
 }
 
 // This method will be called when Electron has finished

docs/fiddles/native-ui/dialogs/information-dialog/renderer.js

@@ -1,7 +1,6 @@
-const { ipcRenderer, shell } = require('electron')
+const { ipcRenderer } = require('electron')
 
 const informationBtn = document.getElementById('information-dialog')
-const links = document.querySelectorAll('a[href]')
 
 informationBtn.addEventListener('click', event => {
   ipcRenderer.send('open-information-dialog')
@@ -13,13 +12,3 @@ ipcRenderer.on('information-dialog-selection', (event, index) => {
   else message += 'no.'
   document.getElementById('info-selection').innerHTML = message
 })
-
-for (const link of links) {
-  const url = link.getAttribute('href')
-  if (url.indexOf('http') === 0) {
-    link.addEventListener('click', (e) => {
-      e.preventDefault()
-      shell.openExternal(url)
-    })
-  }
-}

docs/fiddles/native-ui/dialogs/open-file-or-directory/main.js

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, dialog } = require('electron')
+const { app, BrowserWindow, ipcMain, dialog, shell } = 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.
@@ -29,6 +29,12 @@ function createWindow () {
     // when you should delete the corresponding element.
     mainWindow = null
   })
+
+  // Open external links in the default browser
+  mainWindow.webContents.on('will-navigate', (event, url) => {
+    event.preventDefault()
+    shell.openExternal(url)
+  })
 }
 
 // This method will be called when Electron has finished

docs/fiddles/native-ui/dialogs/open-file-or-directory/renderer.js

@@ -1,7 +1,6 @@
-const { ipcRenderer, shell } = require('electron')
+const { ipcRenderer } = require('electron')
 
 const selectDirBtn = document.getElementById('select-directory')
-const links = document.querySelectorAll('a[href]')
 
 selectDirBtn.addEventListener('click', event => {
   ipcRenderer.send('open-file-dialog')
@@ -10,13 +9,3 @@ selectDirBtn.addEventListener('click', event => {
 ipcRenderer.on('selected-directory', (event, path) => {
   document.getElementById('selected-file').innerHTML = `You selected: ${path}`
 })
-
-for (const link of links) {
-  const url = link.getAttribute('href')
-  if (url.indexOf('http') === 0) {
-    link.addEventListener('click', (e) => {
-      e.preventDefault()
-      shell.openExternal(url)
-    })
-  }
-}

docs/fiddles/native-ui/dialogs/save-dialog/main.js

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, dialog } = require('electron')
+const { app, BrowserWindow, ipcMain, dialog, shell } = 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.
@@ -29,6 +29,12 @@ function createWindow () {
     // when you should delete the corresponding element.
     mainWindow = null
   })
+
+  // Open external links in the default browser
+  mainWindow.webContents.on('will-navigate', (event, url) => {
+    event.preventDefault()
+    shell.openExternal(url)
+  })
 }
 
 // This method will be called when Electron has finished

docs/fiddles/native-ui/dialogs/save-dialog/renderer.js

@@ -1,7 +1,6 @@
-const { ipcRenderer, shell } = require('electron')
+const { ipcRenderer } = require('electron')
 
 const saveBtn = document.getElementById('save-dialog')
-const links = document.querySelectorAll('a[href]')
 
 saveBtn.addEventListener('click', event => {
   ipcRenderer.send('save-dialog')
@@ -11,13 +10,3 @@ ipcRenderer.on('saved-file', (event, path) => {
   if (!path) path = 'No path'
   document.getElementById('file-saved').innerHTML = `Path selected: ${path}`
 })
-
-for (const link of links) {
-  const url = link.getAttribute('href')
-  if (url.indexOf('http') === 0) {
-    link.addEventListener('click', (e) => {
-      e.preventDefault()
-      shell.openExternal(url)
-    })
-  }
-}

docs/fiddles/native-ui/drag-and-drop/main.js

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, nativeImage } = require('electron')
+const { app, BrowserWindow, ipcMain, nativeImage, shell } = 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
@@ -28,6 +28,12 @@ function createWindow () {
     // when you should delete the corresponding element.
     mainWindow = null
   })
+
+  // Open external links in the default browser
+  mainWindow.webContents.on('will-navigate', (event, url) => {
+    event.preventDefault()
+    shell.openExternal(url)
+  })
 }
 
 // This method will be called when Electron has finished

docs/fiddles/native-ui/drag-and-drop/renderer.js

@@ -1,17 +1,4 @@
 const { ipcRenderer } = require('electron')
-const shell = require('electron').shell
-
-const links = document.querySelectorAll('a[href]')
-
-for (const link of links) {
-  const url = link.getAttribute('href')
-  if (url.indexOf('http') === 0) {
-    link.addEventListener('click', (e) => {
-      e.preventDefault()
-      shell.openExternal(url)
-    })
-  }
-}
 
 const dragFileLink = document.getElementById('drag-file-link')
 

docs/fiddles/native-ui/external-links-file-manager/main.js

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow, shell } = 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.
@@ -29,6 +29,12 @@ function createWindow () {
     // when you should delete the corresponding element.
     mainWindow = null
   })
+
+  // Open external links in the default browser
+  mainWindow.webContents.on('will-navigate', (event, url) => {
+    event.preventDefault()
+    shell.openExternal(url)
+  })
 }
 
 // This method will be called when Electron has finished

docs/fiddles/native-ui/external-links-file-manager/renderer.js

@@ -11,15 +11,3 @@ fileManagerBtn.addEventListener('click', (event) => {
 exLinksBtn.addEventListener('click', (event) => {
   shell.openExternal('https://electronjs.org')
 })
-
-const links = document.querySelectorAll('a[href]')
-
-for (const link of links) {
-  const url = link.getAttribute('href')
-  if (url.indexOf('http') === 0) {
-    link.addEventListener('click', (e) => {
-      e.preventDefault()
-      shell.openExternal(url)
-    })
-  }
-}

docs/fiddles/native-ui/notifications/index.html

@@ -26,7 +26,7 @@
 
       <p>
         Open the
-        <a href="https://electronjs.org/docs/all/#notifications-windows-linux-macos">
+        <a href="https://electronjs.org/docs/latest/tutorial/notifications">
           full API documentation<span>(opens in new window)</span>
         </a>
         in your browser.

docs/fiddles/native-ui/notifications/main.js

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow, shell } = 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.
@@ -29,6 +29,12 @@ function createWindow () {
     // when you should delete the corresponding element.
     mainWindow = null
   })
+
+  // Open external links in the default browser
+  mainWindow.webContents.on('will-navigate', (event, url) => {
+    event.preventDefault()
+    shell.openExternal(url)
+  })
 }
 
 // This method will be called when Electron has finished

docs/fiddles/native-ui/notifications/renderer.js

@@ -1,5 +1,3 @@
-const { shell } = require('electron')
-
 const basicNotification = {
   title: 'Basic Notification',
   body: 'Short message part'
@@ -29,15 +27,3 @@ basicNotificationButton.addEventListener('click', () => {
     console.log('Notification clicked')
   }
 })
-
-const links = document.querySelectorAll('a[href]')
-
-for (const link of links) {
-  const url = link.getAttribute('href')
-  if (url.indexOf('http') === 0) {
-    link.addEventListener('click', (e) => {
-      e.preventDefault()
-      shell.openExternal(url)
-    })
-  }
-}

docs/fiddles/system/system-information/get-version-information/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow, shell } = require('electron')
 
 let mainWindow = null
 
@@ -19,6 +19,12 @@ function createWindow () {
   mainWindow.on('closed', () => {
     mainWindow = null
   })
+
+  // Open external links in the default browser
+  mainWindow.webContents.on('will-navigate', (event, url) => {
+    event.preventDefault()
+    shell.openExternal(url)
+  })
 }
 
 app.whenReady().then(() => {

docs/fiddles/system/system-information/get-version-information/renderer.js

@@ -1,5 +1,3 @@
-const { shell } = require('electron')
-
 const versionInfoBtn = document.getElementById('version-info')
 
 const electronVersion = process.versions.electron
@@ -8,15 +6,3 @@ versionInfoBtn.addEventListener('click', () => {
   const message = `This app is using Electron version: ${electronVersion}`
   document.getElementById('got-version-info').innerHTML = message
 })
-
-const links = document.querySelectorAll('a[href]')
-
-for (const link of links) {
-  const url = link.getAttribute('href')
-  if (url.indexOf('http') === 0) {
-    link.addEventListener('click', (e) => {
-      e.preventDefault()
-      shell.openExternal(url)
-    })
-  }
-}

docs/fiddles/windows/manage-windows/frameless-window/main.js

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain } = require('electron')
+const { app, BrowserWindow, ipcMain, shell } = require('electron')
 
 ipcMain.on('create-frameless-window', (event, { url }) => {
   const win = new BrowserWindow({ frame: false })
@@ -19,6 +19,12 @@ function createWindow () {
 
   // and load the index.html of the app.
   mainWindow.loadFile('index.html')
+
+  // Open external links in the default browser
+  mainWindow.webContents.on('will-navigate', (event, url) => {
+    event.preventDefault()
+    shell.openExternal(url)
+  })
 }
 
 // This method will be called when Electron has finished

docs/fiddles/windows/manage-windows/frameless-window/renderer.js

@@ -1,4 +1,4 @@
-const { ipcRenderer, shell } = require('electron')
+const { ipcRenderer } = require('electron')
 
 const newWindowBtn = document.getElementById('frameless-window')
 
@@ -6,15 +6,3 @@ newWindowBtn.addEventListener('click', () => {
   const url = 'data:text/html,<h2>Hello World!</h2><a id="close" href="javascript:window.close()">Close this Window</a>'
   ipcRenderer.send('create-frameless-window', { url })
 })
-
-const links = document.querySelectorAll('a[href]')
-
-for (const link of links) {
-  const url = link.getAttribute('href')
-  if (url.indexOf('http') === 0) {
-    link.addEventListener('click', (e) => {
-      e.preventDefault()
-      shell.openExternal(url)
-    })
-  }
-}

docs/fiddles/windows/manage-windows/manage-window-state/main.js

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain } = require('electron')
+const { app, BrowserWindow, ipcMain, shell } = require('electron')
 
 ipcMain.on('create-demo-window', (event) => {
   const win = new BrowserWindow({ width: 400, height: 275 })
@@ -29,6 +29,12 @@ function createWindow () {
 
   // and load the index.html of the app.
   mainWindow.loadFile('index.html')
+
+  // Open external links in the default browser
+  mainWindow.webContents.on('will-navigate', (event, url) => {
+    event.preventDefault()
+    shell.openExternal(url)
+  })
 }
 
 // This method will be called when Electron has finished

docs/fiddles/windows/manage-windows/manage-window-state/renderer.js

@@ -1,9 +1,7 @@
-const { shell, ipcRenderer } = require('electron')
+const { ipcRenderer } = require('electron')
 
 const manageWindowBtn = document.getElementById('manage-window')
 
-const links = document.querySelectorAll('a[href]')
-
 ipcRenderer.on('bounds-changed', (event, bounds) => {
   const manageWindowReply = document.getElementById('manage-window-reply')
   const message = `Size: ${bounds.size} Position: ${bounds.position}`
@@ -13,13 +11,3 @@ ipcRenderer.on('bounds-changed', (event, bounds) => {
 manageWindowBtn.addEventListener('click', (event) => {
   ipcRenderer.send('create-demo-window')
 })
-
-for (const link of links) {
-  const url = link.getAttribute('href')
-  if (url.indexOf('http') === 0) {
-    link.addEventListener('click', (e) => {
-      e.preventDefault()
-      shell.openExternal(url)
-    })
-  }
-}

docs/fiddles/windows/manage-windows/window-events/main.js

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain } = require('electron')
+const { app, BrowserWindow, ipcMain, shell } = require('electron')
 
 function createWindow () {
   // Create the browser window.
@@ -15,6 +15,12 @@ function createWindow () {
   // and load the index.html of the app.
   mainWindow.loadFile('index.html')
 
+  // Open external links in the default browser
+  mainWindow.webContents.on('will-navigate', (event, url) => {
+    event.preventDefault()
+    shell.openExternal(url)
+  })
+
   let demoWindow
   ipcMain.on('show-demo-window', () => {
     if (demoWindow) {

docs/fiddles/windows/manage-windows/window-events/renderer.js

@@ -1,4 +1,4 @@
-const { shell, ipcRenderer } = require('electron')
+const { ipcRenderer } = require('electron')
 
 const listenToWindowBtn = document.getElementById('listen-to-window')
 const focusModalBtn = document.getElementById('focus-on-modal-window')
@@ -25,15 +25,3 @@ ipcRenderer.on('window-blur', showFocusBtn)
 listenToWindowBtn.addEventListener('click', () => {
   ipcRenderer.send('show-demo-window')
 })
-
-const links = document.querySelectorAll('a[href]')
-
-for (const link of links) {
-  const url = link.getAttribute('href')
-  if (url.indexOf('http') === 0) {
-    link.addEventListener('click', (e) => {
-      e.preventDefault()
-      shell.openExternal(url)
-    })
-  }
-}