web-dev-qa-db-fra.com

Comment puis-je forcer les liens externes de la fenêtre du navigateur à s'ouvrir dans un navigateur par défaut d'Electron?

J'utilise BrowserWindow pour afficher une application et je voudrais forcer l'ouverture des liens externes dans le navigateur par défaut. Est-ce même possible ou je dois aborder cela différemment?

node.jselectron
35
Lipis

Je suis venu avec cela, après avoir vérifié la solution de la réponse précédente.

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

Selon le électron spec , new-window est déclenché lorsque vous cliquez sur des liens externes.

REMARQUE: nécessite que vous utilisiez target="_blank" sur vos balises d'ancrage.

75
René Herrmann

Si vous n'utilisez pas target="_blank" dans vos éléments anchor, cela pourrait fonctionner pour vous:

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

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

Je n'ai pas testé cela mais je suppose que cela devrait fonctionner:

1) Obtenez WebContents de votre BrowserWindow

 var wc = browserWindow.webContents;

2) Inscrivez-vous pour will-navigate sur WebContent et intercepter les clics de navigation/lien:

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

3) Implémentez openBrowser en utilisant child_process . Un exemple pour les bureaux Linux:

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

faites-moi savoir si cela fonctionne pour vous!

3
Yan Foto

Pour tous ceux qui passent.

Mon cas d'utilisation:

J'utilisais SimpleMDE dans mon application et son mode de prévisualisation ouvrait des liens dans la même fenêtre. Je voulais que tous les liens s'ouvrent dans le navigateur du système d'exploitation par défaut. J'ai mis cet extrait, basé sur les autres réponses, dans mon fichier main.js. Il l'appelle après avoir créé la nouvelle instance de BrowserWindow. Mon instance s'appelle mainWindow

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

Amélioré de la réponse acceptée;

  1. le lien doit être target="_blank";

  2. ajouter à background.js (ou n'importe où vous avez créé votre fenêtre):

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

Remarque: Pour garantir ce comportement dans toutes les fenêtres d'application, ce code doit être exécuté après chaque création de fenêtre.

2
Cethy

Vérifiez si l'URL demandée est un lien externe. Si oui, utilisez 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);
  }
}
1
cuixiping

Mettez ceci dans renderer side js fichier. Il ouvrira les liens http, https dans le navigateur par défaut de l'utilisateur.

Aucun JQuery attaché! non target="_blank" obligatoire!

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

Pour Electron 5, c'est ce qui a fonctionné pour moi:

  • Dans main.js (Où vous créez la fenêtre de votre navigateur), incluez 'Shell' dans votre instruction require principale (généralement en haut du fichier), par exemple:

    // Modules to control application life and create native browser window const { BrowserWindow, Shell } = require('electron');

  • À l'intérieur de la fonction createWindow(), après la fonction mainWindow = new BrowserWindow({ ... }), ajoutez ces lignes:

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

0
Jaifroid