在浏览器中打开来自 Electron 的链接

Question

是否有任何（简单/内置方式）可以打开一个新浏览器（我的意思是默认操作系统浏览器）窗口以获取来自 Electron 的链接，而不是在您的 Electron 应用程序中访问该链接？

Answer 1

我在 Electron v.13 中使用这种方法。

我们拦截用户的导航（window.location）并在默认浏览器中打开网址。

查看文档：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 2

编辑：@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 3

我的代码 sn-p 根据 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 4

要在 Electron 的项目中打开外部链接，您需要模块 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 5

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

通过监听 body，以下解决方案将适用于 <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's）：

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

更多示例请咨询the gist。

Answer 6

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

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

Answer 7

要在您的实际浏览器（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 8

要使所有 Electron 链接在默认操作系统浏览器中从外部打开，您必须向它们添加 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 9

你可以简单地使用：

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