docs: handle opening links in the default browser in main.js (part #2) (#39473)

docs: handle opening links in the default browser in main.js

docs/fiddles/system/system-app-user-information/app-information/main.js

@@ -1,5 +1,34 @@
-const { app, ipcMain } = require('electron')
+const { app, BrowserWindow, ipcMain, shell } = require('electron')
 
-ipcMain.on('get-app-path', (event) => {
+let mainWindow = null
-  event.sender.send('got-app-path', app.getAppPath())
+
+ipcMain.handle('get-app-path', (event) => app.getAppPath())
+
+function createWindow () {
+  const windowOptions = {
+    width: 600,
+    height: 400,
+    title: 'Get app information',
+    webPreferences: {
+      contextIsolation: false,
+      nodeIntegration: true
+    }
+  }
+
+  mainWindow = new BrowserWindow(windowOptions)
+  mainWindow.loadFile('index.html')
+
+  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(() => {
+  createWindow()
 })

docs/fiddles/system/system-app-user-information/app-information/renderer.js

@@ -1,19 +1,9 @@
-const { ipcRenderer, shell } = require('electron')
+const { ipcRenderer } = require('electron')
 
 const appInfoBtn = document.getElementById('app-info')
-const electronDocLink = document.querySelectorAll('a[href]')
 
-appInfoBtn.addEventListener('click', () => {
+appInfoBtn.addEventListener('click', async () => {
-  ipcRenderer.send('get-app-path')
+  const path = await ipcRenderer.invoke('get-app-path')
-})
-
-ipcRenderer.on('got-app-path', (event, path) => {
   const message = `This app is located at: ${path}`
   document.getElementById('got-app-info').innerHTML = message
 })
-
-electronDocLink.addEventListener('click', (e) => {
-  e.preventDefault()
-  const url = e.target.getAttribute('href')
-  shell.openExternal(url)
-})

docs/fiddles/windows/manage-windows/new-window/index.html

@@ -8,7 +8,7 @@
   <h3>Supports: Win, macOS, Linux <span>|</span> Process: Main</h3>
   <button id="new-window">View Demo</button>
   <p>The <code>BrowserWindow</code> module gives you the ability to create new windows in your app.</p>
-  <p>There are a lot of options when creating a new window. A few are in this demo, but visit the <a id="browser-window-link" href="">documentation<span>(opens in new window)</span></a>
+  <p>There are a lot of options when creating a new window. A few are in this demo, but visit the <a href="https://www.electronjs.org/docs/latest/api/browser-window">documentation<span>(opens in new window)</span></a>
 <div>
             <h2>ProTip</h2>
             <strong>Use an invisible browser window to run background tasks.</strong>

docs/fiddles/windows/manage-windows/new-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('new-window', (event, { url, width, height }) => {
   const win = new BrowserWindow({ width, height })
@@ -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/new-window/renderer.js

@@ -1,14 +1,8 @@
-const { shell, ipcRenderer } = require('electron')
+const { ipcRenderer } = require('electron')
 
 const newWindowBtn = document.getElementById('new-window')
-const link = document.getElementById('browser-window-link')
 
 newWindowBtn.addEventListener('click', (event) => {
   const url = 'https://electronjs.org'
   ipcRenderer.send('new-window', { url, width: 400, height: 320 })
 })
-
-link.addEventListener('click', (e) => {
-  e.preventDefault()
-  shell.openExternal('https://www.electronjs.org/docs/latest/api/browser-window')
-})