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

I'm using the BrowserWindow to display an app and I would like to force the external links to be opened in the default browser. Is that even possible or I have to approach this differently?

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

7 个解决方案

#1

I came up with this, after checking the solution from the previous answer.

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

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

According to the electron spec, new-window is fired when external links are clicked.

根据电子规范，点击外部链接时会触发新窗口。

#2

If you're not using target="_blank" in your anchor elements, this might work for you:

如果您没有在锚元素中使用target =“_ blank”，这可能对您有用：

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

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

#3

I haven't tested this but I assume this is should work:

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

1) Get WebContents of the your BrowserWindow

1）获取BrowserWindow的WebContents

 var wc = browserWindow.webContents;

2) Register for will-navigate of WebContent and intercept navigation/link clicks:

2）注册WebContent的导航和拦截导航/链接点击：

wc.on('will-navigate', function(e, url) {
  /* If url isn't the actual page */
  if(url != wc.getURL()) {
    e.preventDefault();
    openBrowser(url);
  } 
}

3) Implement openBrowser using child_process. An example for Linux desktops:

3）使用child_process实现openBrowser。 Linux桌面的一个示例：

var openBrowser(url) {
  require('child_process').exec('xdg-open ' + url);
}

let me know if this works for you!

如果这对您有用，请告诉我！

#4

For anybody coming by.

对于任何来过的人。

My use case:

我的用例：

I was using SimpleMDE in my app and it's preview mode was opening links in the same window. I wanted all links to open in the default OS browser. I put this snippet, based on the other answers, inside my main.js file. It calls it after it creates the new BrowserWindow instance. My instance is called mainWindow

我在我的应用程序中使用SimpleMDE，它的预览模式是在同一个窗口中打开链接。我希望在默认的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)
  }
})

#5

Improved from the accepted answer ;

从接受的答案改进;

the link must be target="_blank" ;
链接必须是target =“_ blank”;

add in background.js(or anywhere you created your window) :

添加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);
});

Note : To ensure this behavior across all application windows, this code should be run after each window creation.

注意：要确保跨所有应用程序窗口的此行为，应在每个窗口创建后运行此代码。

#6

Check whether the requested url is an external link. If yes then use shell.openExternal.

检查请求的URL是否是外部链接。如果是，则使用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);
  }
}

#7

Put this in renderer side js file. It'll open http, https links in user's default browser.

把它放在渲染器端的js文件中。它将在用户的默认浏览器中打开http，https链接。

No JQuery attached! no target="_blank" required!

没有JQuery附加！没有目标=“_空白”需要！

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)
  }
})

#1