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