Question

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

Answer 1

您可以简单地使用：

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

Answer 2

有一种比@Marcelo提出的方式更好，更简单的方法，但更容易实现所有链接同时实现@zianwar所提议的内容。

RUN apt-get upgrade gcc

注意：需要jQuery。

Answer 3

要在默认操作系统浏览器中外部打开所有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 4

我的代码片段提示了 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 5

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

要求您在锚标记上使用target =“ _ blank”。

Answer 6

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

通过侦听正文，以下解决方案将在运行JavaScript时可能不存在的<a>标签上起作用，而仅在以后出现在DOM中。 / p>

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

要在您的实际浏览器（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 = "#";
}

在浏览器中打开Electron链接

8 个答案: