Question

我使用BrowserWindow来显示应用，我想强制在默认浏览器中打开外部链接。这是可能的还是我必须以不同的方式处理这个问题？

Answer 1

在检查上一个答案的解决方案之后，我想出了这个。

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

根据electron spec，点击外部链接时会触发new-window。

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

Answer 2

如果您未在target="_blank"元素中使用anchor，这可能对您有用：

  const shell = require('electron').shell;

  $(document).on('click', 'a[href^="http"]', function(event) {
    event.preventDefault();
    shell.openExternal(this.href);
  });

Answer 3

我没有对此进行过测试，但我认为这应该可行：

1）获取BrowserWindow

的WebContents

 var wc = browserWindow.webContents;

2）注册WebContent wc.on('will-navigate', function(e, url) { /* If url isn't the actual page */ if(url != wc.getURL()) { e.preventDefault(); openBrowser(url); } }并截取导航/链接点击次数：

openBrowser

3）使用will-navigate实施var openBrowser(url) { require('child_process').exec('xdg-open ' + url); }。 Linux桌面的一个示例：

 <div class="container-fluid">
<div class="row">

  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
  <div id="header"><img class="img-responsive" src="images/profile.jpg"></div>
 </div>
 </div>
<div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-6"><img class="img-responsive" src="images/helpUs.jpg"></div>
    <div class="col-sm-3"></div>
  </div>
</div>

让我知道这是否适合您！

Answer 4

对于任何来过的人。

我的用例：

我在我的应用中使用了this answer on arrays vs sets，它的预览模式是在同一个窗口中打开链接。我希望所有链接都在默认的OS浏览器中打开。我把这个片段基于其他答案放在我的main.js文件中。它在创建新的BrowserWindow实例后调用它。我的实例叫做mainWindow

let wc = mainWindow.webContents
wc.on('will-navigate', function (e, url) {
  if (url != wc.getURL()) {
    e.preventDefault()
    electron.shell.openExternal(url)
  }
})

Answer 5

从接受的答案改进;

该链接必须为background.js;

添加window.webContents.on('new-window', function(e, url) { // make sure local urls stay in electron perimeter if('file://' === url.substr(0, 'file://'.length)) { return; } // and open every other protocols on the browser e.preventDefault(); shell.openExternal(url); });（或您创建窗口的任何位置）：

public class A
{
    private void PrivateMethod() {  /*can be seen only here */ }
    protected void ProtectedMethod() {  /*can be seen here and by anyone deriving from me (A) */ }
    internal void InternalMethod() {  /*can be seen here and by anyone in the same assembly with me. */ }
    public void PublicMethod() {  /*can be seen here and by anyone else. */ }
}

注意：为确保在所有应用程序窗口中出现此行为，应在每次创建窗口后运行此代码。

Answer 6

new-window 现在在 Electron 12 中被弃用，取而代之的是 setWindowOpenHandler（参见 https://github.com/electron/electron/pull/24517）。

所以更新的答案是：

mainWindow.webContents.setWindowOpenHandler(({ url }) => {
  shell.openExternal(url);
  return { action: 'deny' };
});

Answer 7

检查请求的网址是否为外部链接。如果是，则使用shell.openExternal。

mainWindow.webContents.on('will-navigate', function(e, reqUrl) {
  let getHost = url=>require('url').parse(url).host;
  let reqHost = getHost(reqUrl);
  let isExternal = reqHost && reqHost != getHost(wc.getURL());
  if(isExternal) {
    e.preventDefault();
    electron.shell.openExternal(reqUrl);
  }
}

Answer 8

将其放在renderer side js文件中。它会在用户的默认浏览器中打开http，https个链接。

没有附加JQuery！不需要target="_blank"！

let shell = require('electron').shell
document.addEventListener('click', function (event) {
  if (event.target.tagName === 'A' && event.target.href.startsWith('http')) {
    event.preventDefault()
    shell.openExternal(event.target.href)
  }
})

Answer 9

对于Electron 5，这对我有用：

在main.js（您在其中创建浏览器窗口的位置）的主require语句中（通常在文件顶部）添加“ shell”，例如：

// Modules to control application life and create native browser window const { BrowserWindow, shell } = require('electron');
在createWindow()函数内部的mainWindow = new BrowserWindow({ ... })函数中，添加以下行：

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

Answer 10

我通过以下步骤解决了问题

在const {app, BrowserWindow} = require('electron')上添加外壳

const {app, BrowserWindow, shell} = require('electron')

将nativeWindowOpen设置为true

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1350,
    height: 880,
    webPreferences: {
      nativeWindowOpen: true,
      preload: path.join(__dirname, 'preload.js')
    },
    icon: path.join(__dirname, './img/icon.icns')
})

添加以下侦听器代码

  mainWindow.webContents.on('will-navigate', function(e, reqUrl) {
    let getHost = url=>require('url').parse(url).host;
    let reqHost = getHost(reqUrl);
    let isExternal = reqHost && reqHost !== getHost(wc.getURL());
    if(isExternal) {
      e.preventDefault();
      shell.openExternal(reqUrl, {});
    }
  })

通过引用进行

引用https://stackoverflow.com/a/42570770/7458156

Answer 11

我倾向于在外部 .js 脚本中使用这些行：

let ele = document.createElement("a");
let url = "https://google.com";
ele.setAttribute("href", url);
ele.setAttribute("onclick", "require('electron').shell.openExternal('" + url + "')");

如何从浏览器窗口强制外部链接在Electron的默认浏览器中打开？

11 个答案: