mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat: #20442 adds fiddle for opening external links and the pro version of opening all outbound links (#20763)

Browse source
This commit is contained in:
Alan Ionita 2019-11-13 05:46:35 +00:00 committed by Cheng Zhao
parent 97959b5e5c
commit 09533e77da
3 changed files with 113 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Open external links</title>
</head>
<body>
<div class="demo">
<div class="demo-wrapper">
<div class="demo-box">
<div class="demo-controls">
<button class="demo-button" id="open-ex-links">View Demo</button>
</div>
<p>
If you do not want your app to open website links
<em>within</em> the app, you can use the <code>shell</code> module
to open them externally. When clicked, the links will open outside
of your app and in the user's default web browser.
</p>
<p>
When the demo button is clicked, the electron website will open in
your browser.
</p>
<p></p>
<h5>Renderer Process</h5>
<pre><code>
const { shell } = require('electron')
const exLinksBtn = document.getElementById('open-ex-links')
exLinksBtn.addEventListener('click', (event) => {
shell.openExternal('http://electron.atom.io')
})
</code></pre>
<div class="demo-protip">
<h2>ProTip</h2>
<strong>Open all outbound links externally.</strong>
<p>
You may want to open all <code>http</code> and
<code>https</code> 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
<code>assets/ex-links.js</code>.
</p>
<h5>Renderer Process</h5>
<pre><code>
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)
})
}})
</code></pre>
</div>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>

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

@ -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()
})

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

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