Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: #20442 adds fiddle for opening external links and the pro versi…
…on of opening all outbound links (#20763)
- Loading branch information
1 parent
97959b5
commit 09533e7
Showing
3 changed files
with
113 additions
and
0 deletions.
There are no files selected for viewing
67 changes: 67 additions & 0 deletions
67
docs/fiddles/native-ui/external-links-file-manager/external-links/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 changes: 25 additions & 0 deletions
25
docs/fiddles/native-ui/external-links-file-manager/external-links/main.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 changes: 21 additions & 0 deletions
21
docs/fiddles/native-ui/external-links-file-manager/external-links/renderer.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) | ||
}) | ||
} | ||
}) | ||
} |