在浏览器中打开来自 Electron 的 link

Question

是否有任何（simple/built-in 方式）打开一个新的浏览器（我的意思是默认 OS 浏览器）window 来自 Electron 的 link 而不是访问那个link 在您的 Electron 应用程序中？

Answer 1

您可以简单地使用：

require("shell").openExternal("http://www.google.com")

Answer 2

要使所有 Electron 链接在默认 OS 浏览器中从外部打开，您必须向它们添加 onclick 属性并更改 href 属性所以它不会在 Electron 应用程序中加载任何东西。

你可以使用这样的东西：

aTags = document.getElementsByTagName("a");
for (var i = 0; i < aTags.length; i++) {
  aTags[i].setAttribute("onclick","require('shell').openExternal('" + aTags[i].href + "')");
  aTags[i].href = "#";
}

但是确保在之前加载整个文档，否则它将无法工作。一个更健壮的实现看起来像这样：

if (document.readyState != "complete") {
  document.addEventListener('DOMContentLoaded', function() {
    prepareTags()
  }, false);
} else {
  prepareTags();
}

function prepareTags(){
  aTags = document.getElementsByTagName("a");
  for (var i = 0; i < aTags.length; i++) {
    aTags[i].setAttribute("onclick","require('shell').openExternal('" + aTags[i].href + "')");
    aTags[i].href = "#";
  }
  return false;
}

请记住，如果您加载外部文件，则必须让它们也经过此过程在它们完全加载之后。

Answer 3

编辑：最近@Arjun Kava 的回答好多了。

这个答案很老，假设你有 jQuery。

const shell = require('electron').shell;
  
// assuming $ is jQuery
$(document).on('click', 'a[href^="http"]', function(event) {
    event.preventDefault();
    shell.openExternal(this.href);
});

Answer 4

要在您的实际浏览器（Chrome、Mozilla 等）中运行 Electron 项目，将此添加到您的脚本是外部脚本：

aTags = document.getElementsByTagName("a");
for (var i = 0; i < aTags.length; i++) {
     aTags[i].setAttribute("onclick","require('shell').openExternal('" + aTags[i].href + "')");
     aTags[i].href = "#";
}

Answer 5

mainWindow.webContents.on('new-window', function(e, url) {
  e.preventDefault();
  require('electron').shell.openExternal(url);
});

要求您在锚标签上使用 target="_blank"。

Answer 6

可以在 this gist 中找到一些方便的解决方案。

通过侦听正文，以下解决方案将适用于 <a> 标签，这些标签 可能在 JavaScript 运行时尚不存在 ，但只会出现稍后在 DOM 中。

这个 luizcarraro 需要 jQuery:

$('body').on('click', 'a', (event) => {
  event.preventDefault();
  require("electron").shell.openExternal(event.target.href);
});

您可以将选择器更改为仅定位特定链接，例如'#messages-view a' 或 'a.open-external'.

这是一个没有任何库的替代方案（源自 zrbecker 的）：

document.body.addEventListener('click', event => {
  if (event.target.tagName.toLowerCase() === 'a') {
    event.preventDefault();
    require("electron").shell.openExternal(event.target.href);
  }
});

有关更多示例，请参阅 the gist。

Answer 7

要在 Electron 项目中打开外部 link，您需要模块 Shell (https://www.electronjs.org/docs/api/shell#shell) 和方法 openExternal.

但是，如果您正在寻找一种实现该逻辑的抽象方法，那就是为您的目标属性的自定义目标创建一个处理程序。

const {shell} = require('electron');

if (document.readyState != "complete") {
    document.addEventListener('DOMContentLoaded', function() {
        init()
    }, false);
} else {
    init();
}

function init(){
    handleExternalLinks();
    //other inits
}


function handleExternalLinks(){
    let links = document.getElementsByTagName('a')
    let a,i = 0;
    while (links[i]){
        a = links[i]
        //If <a target="_external">, so open using shell.
        if(a.getAttribute('target') == '_external'){
            a.addEventListener('click',(ev => {
                ev.preventDefault();
                let url = a.href;
                shell.openExternal(url);
                a.setAttribute('href', '#');
                return false;
            }))
        }
        console.log(a,a.getAttribute('external'))
        i++;
    }
}

Answer 8

我的代码片段根据 Electron 版本 ^12.0.0

中的贬值线索

const win = new BrowserWindow();
win.webContents.setWindowOpenHandler(({ url }) => {
    // config.fileProtocol is my custom file protocol
    if (url.startsWith(config.fileProtocol)) {
        return { action: 'allow' };
    }
    // open url in a browser and prevent default
    shell.openExternal(url);
    return { action: 'deny' };
});

Answer 9

我将此方法用于 Electron v.13。

我们拦截用户的导航(window.location)，并在默认浏览器中打开URL。

查看文档：https://www.electronjs.org/docs/latest/api/web-contents#event-will-navigate

const { shell } = require('electron');

window.webContents.on('will-navigate', function (e, url) {
    e.preventDefault();
    shell.openExternal(url);
});

Answer 10

关于 tsx 语法 (Electron):

import { shell } from "electron";
shell.openExternal("http://www.google.com")

在浏览器中打开来自 Electron 的 link

Make a link from Electron open in browser

javascript

node.js

electron