From 09533e77da82c182f8f8738d5adb4bdf9fc7f01b Mon Sep 17 00:00:00 2001 From: Alan Ionita Date: Wed, 13 Nov 2019 05:46:35 +0000 Subject: [PATCH] feat: #20442 adds fiddle for opening external links and the pro version of opening all outbound links (#20763) --- .../external-links/index.html | 67 +++++++++++++++++++ .../external-links/main.js | 25 +++++++ .../external-links/renderer.js | 21 ++++++ 3 files changed, 113 insertions(+) create mode 100644 docs/fiddles/native-ui/external-links-file-manager/external-links/index.html create mode 100644 docs/fiddles/native-ui/external-links-file-manager/external-links/main.js create mode 100644 docs/fiddles/native-ui/external-links-file-manager/external-links/renderer.js diff --git a/docs/fiddles/native-ui/external-links-file-manager/external-links/index.html b/docs/fiddles/native-ui/external-links-file-manager/external-links/index.html new file mode 100644 index 000000000000..953dc24bc878 --- /dev/null +++ b/docs/fiddles/native-ui/external-links-file-manager/external-links/index.html @@ -0,0 +1,67 @@ + + + + + Open external links + + +
+
+
+
+ +
+

+ If you do not want your app to open website links + within the app, you can use the shell module + to open them externally. When clicked, the links will open outside + of your app and in the user's default web browser. +

+

+ When the demo button is clicked, the electron website will open in + your browser. +

+

+
Renderer Process
+ 

+                const { shell } = require('electron')
+                const exLinksBtn = document.getElementById('open-ex-links')
+                exLinksBtn.addEventListener('click', (event) => {
+                shell.openExternal('http://electron.atom.io')
+                }) 
+
+ +
+

ProTip

+ Open all outbound links externally. +

+ You may want to open all http and + https links outside of your app. To do this, query + the document and loop through each link and add a listener. This + app uses the code below which is located in + assets/ex-links.js. +

+
Renderer Process
+ 

+                const { shell } = require('electron')
+                const links = document.querySelectorAll('a[href]')
+                Array.prototype.forEach.call(links, (link) => {
+                    const url = link.getAttribute('href')
+                    if (url.indexOf('http') === 0) {
+                    link.addEventListener('click', (e) => {
+                        e.preventDefault()
+                        shell.openExternal(url)
+                    })
+                }})
+
+
+
+
+
+ + + + diff --git a/docs/fiddles/native-ui/external-links-file-manager/external-links/main.js b/docs/fiddles/native-ui/external-links-file-manager/external-links/main.js new file mode 100644 index 000000000000..2061823025e8 --- /dev/null +++ b/docs/fiddles/native-ui/external-links-file-manager/external-links/main.js @@ -0,0 +1,25 @@ +const { app, BrowserWindow } = require('electron') + +let mainWindow = null + +function createWindow () { + const windowOptions = { + width: 600, + height: 400, + title: 'Open External Links', + webPreferences: { + nodeIntegration: true + } + } + + mainWindow = new BrowserWindow(windowOptions) + mainWindow.loadFile('index.html') + + mainWindow.on('closed', () => { + mainWindow = null + }) +} + +app.on('ready', () => { + createWindow() +}) diff --git a/docs/fiddles/native-ui/external-links-file-manager/external-links/renderer.js b/docs/fiddles/native-ui/external-links-file-manager/external-links/renderer.js new file mode 100644 index 000000000000..931c94446c2a --- /dev/null +++ b/docs/fiddles/native-ui/external-links-file-manager/external-links/renderer.js @@ -0,0 +1,21 @@ +const { shell } = require('electron') + +const exLinksBtn = document.getElementById('open-ex-links') + +exLinksBtn.addEventListener('click', (event) => { + shell.openExternal('http://electron.atom.io') +}) + +const OpenAllOutboundLinks = () => { + const links = document.querySelectorAll('a[href]') + + Array.prototype.forEach.call(links, (link) => { + const url = link.getAttribute('href') + if (url.indexOf('http') === 0) { + link.addEventListener('click', (e) => { + e.preventDefault() + shell.openExternal(url) + }) + } + }) +}