docs: fix fiddles (#39060)

* refactor: replace Array.prototype.forEach.call with plain for-of

* fix: add missing contextIsolation: false

* fix: open links in default browser

docs/fiddles/media/screenshot/take-screenshot/main.js

@@ -12,6 +12,7 @@ function createWindow () {
     height: 300,
     title: 'Take a Screenshot',
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   }

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

@@ -294,6 +294,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   })

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

@@ -1,4 +1,4 @@
-const { ipcRenderer } = require('electron')
+const { ipcRenderer, shell } = require('electron')
 
 // Tell main process to show the menu when demo button is clicked
 const contextMenuBtn = document.getElementById('context-menu')
@@ -6,3 +6,15 @@ 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,6 +68,10 @@
 			</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

@@ -11,6 +11,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   })

docs/fiddles/menus/shortcuts/renderer.js

@@ -0,0 +1,13 @@
+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

@@ -11,6 +11,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   })

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

@@ -7,7 +7,7 @@ errorBtn.addEventListener('click', event => {
   ipcRenderer.send('open-error-dialog')
 })
 
-Array.prototype.forEach.call(links, (link) => {
+for (const link of links) {
   const url = link.getAttribute('href')
   if (url.indexOf('http') === 0) {
     link.addEventListener('click', (e) => {
@@ -15,4 +15,4 @@ Array.prototype.forEach.call(links, (link) => {
       shell.openExternal(url)
     })
   }
-})
+}

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

@@ -11,6 +11,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   })

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

@@ -14,7 +14,7 @@ ipcRenderer.on('information-dialog-selection', (event, index) => {
   document.getElementById('info-selection').innerHTML = message
 })
 
-Array.prototype.forEach.call(links, (link) => {
+for (const link of links) {
   const url = link.getAttribute('href')
   if (url.indexOf('http') === 0) {
     link.addEventListener('click', (e) => {
@@ -22,4 +22,4 @@ Array.prototype.forEach.call(links, (link) => {
       shell.openExternal(url)
     })
   }
-})
+}

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

@@ -11,6 +11,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   })

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

@@ -11,7 +11,7 @@ ipcRenderer.on('selected-directory', (event, path) => {
   document.getElementById('selected-file').innerHTML = `You selected: ${path}`
 })
 
-Array.prototype.forEach.call(links, (link) => {
+for (const link of links) {
   const url = link.getAttribute('href')
   if (url.indexOf('http') === 0) {
     link.addEventListener('click', (e) => {
@@ -19,4 +19,4 @@ Array.prototype.forEach.call(links, (link) => {
       shell.openExternal(url)
     })
   }
-})
+}

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

@@ -11,6 +11,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   })

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

@@ -12,7 +12,7 @@ ipcRenderer.on('saved-file', (event, path) => {
   document.getElementById('file-saved').innerHTML = `Path selected: ${path}`
 })
 
-Array.prototype.forEach.call(links, (link) => {
+for (const link of links) {
   const url = link.getAttribute('href')
   if (url.indexOf('http') === 0) {
     link.addEventListener('click', (e) => {
@@ -20,4 +20,4 @@ Array.prototype.forEach.call(links, (link) => {
       shell.openExternal(url)
     })
   }
-})
+}

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

@@ -10,6 +10,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   })

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

@@ -3,7 +3,7 @@ const shell = require('electron').shell
 
 const links = document.querySelectorAll('a[href]')
 
-Array.prototype.forEach.call(links, (link) => {
+for (const link of links) {
   const url = link.getAttribute('href')
   if (url.indexOf('http') === 0) {
     link.addEventListener('click', (e) => {
@@ -11,7 +11,7 @@ Array.prototype.forEach.call(links, (link) => {
       shell.openExternal(url)
     })
   }
-})
+}
 
 const dragFileLink = document.getElementById('drag-file-link')
 

docs/fiddles/native-ui/external-links-file-manager/external-links/index.html

@@ -45,14 +45,15 @@
             <pre><code>
                 const { shell } = require('electron')
                 const links = document.querySelectorAll('a[href]')
-                Array.prototype.forEach.call(links, (link) => {
+                for (const link of links) {
                     const url = link.getAttribute('href')
                     if (url.indexOf('http') === 0) {
-                    link.addEventListener('click', (e) => {
-                        e.preventDefault()
-                        shell.openExternal(url)
-                    })
-                }})
+                        link.addEventListener('click', (e) => {
+                            e.preventDefault()
+                            shell.openExternal(url)
+                        })
+                    }
+                }
             </code></pre>
           </div>
         </div>

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

@@ -8,6 +8,7 @@ function createWindow () {
     height: 400,
     title: 'Open External Links',
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   }

docs/fiddles/native-ui/external-links-file-manager/index.html

@@ -80,7 +80,7 @@ const shell = require('electron').shell
 
 const links = document.querySelectorAll('a[href]')
 
-Array.prototype.forEach.call(links, (link) => {
+for (const link of links) {
   const url = link.getAttribute('href')
   if (url.indexOf('http') === 0) {
     link.addEventListener('click', (e) => {
@@ -88,7 +88,7 @@ Array.prototype.forEach.call(links, (link) => {
       shell.openExternal(url)
     })
   }
-})
+}
                 </code>
               </pre>
           </div>

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

@@ -11,6 +11,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   })

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

@@ -8,6 +8,7 @@ function createWindow () {
     height: 400,
     title: 'Open Path in File Manager',
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   }

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

@@ -11,3 +11,15 @@ 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/basic-notification/main.js

@@ -8,6 +8,7 @@ function createWindow () {
     height: 300,
     title: 'Basic Notification',
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   }

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

@@ -11,6 +11,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   })

docs/fiddles/native-ui/notifications/notification-with-image/main.js

@@ -8,6 +8,7 @@ function createWindow () {
     height: 300,
     title: 'Advanced Notification',
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   }

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

@@ -1,3 +1,5 @@
+const { shell } = require('electron')
+
 const basicNotification = {
   title: 'Basic Notification',
   body: 'Short message part'
@@ -27,3 +29,15 @@ 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

@@ -8,6 +8,7 @@ function createWindow () {
     height: 400,
     title: 'Get version information',
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   }

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

@@ -1,3 +1,5 @@
+const { shell } = require('electron')
+
 const versionInfoBtn = document.getElementById('version-info')
 
 const electronVersion = process.versions.electron
@@ -6,3 +8,15 @@ 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/create-frameless-window/main.js

@@ -11,6 +11,7 @@ function createWindow () {
     height: 400,
     title: 'Create a frameless window',
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   })

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

@@ -12,6 +12,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   })

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

@@ -1,4 +1,4 @@
-const { ipcRenderer } = require('electron')
+const { ipcRenderer, shell } = require('electron')
 
 const newWindowBtn = document.getElementById('frameless-window')
 
@@ -6,3 +6,15 @@ 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

@@ -22,6 +22,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   })

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

@@ -14,7 +14,7 @@ manageWindowBtn.addEventListener('click', (event) => {
   ipcRenderer.send('create-demo-window')
 })
 
-Array.prototype.forEach.call(links, (link) => {
+for (const link of links) {
   const url = link.getAttribute('href')
   if (url.indexOf('http') === 0) {
     link.addEventListener('click', (e) => {
@@ -22,4 +22,4 @@ Array.prototype.forEach.call(links, (link) => {
       shell.openExternal(url)
     })
   }
-})
+}

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

@@ -12,6 +12,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   })

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

@@ -7,6 +7,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   })

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

@@ -28,7 +28,7 @@ listenToWindowBtn.addEventListener('click', () => {
 
 const links = document.querySelectorAll('a[href]')
 
-Array.prototype.forEach.call(links, (link) => {
+for (const link of links) {
   const url = link.getAttribute('href')
   if (url.indexOf('http') === 0) {
     link.addEventListener('click', (e) => {
@@ -36,4 +36,4 @@ Array.prototype.forEach.call(links, (link) => {
       shell.openExternal(url)
     })
   }
-})
+}