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/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)
-    })
-  }
-}