Hoe kan ik externe links vanuit het browservenster dwingen om te openen in een standaardbrowser van Electron?

Ik gebruik de BrowserWindowom een ​​app weer te geven en Ik wil graag dat de externe links worden geopend in de standaardbrowser. Kan dat überhaupt of moet ik het anders aanpakken?

Antwoord 1, autoriteit 100%

Ik kwam hiermee op de proppen, nadat ik de oplossing uit het vorige antwoord had gecontroleerd.

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

Volgens de elektron spec, new-windowwordt geactiveerd wanneer op externe links wordt geklikt.

OPMERKING: vereist dat u target="_blank"gebruikt voor uw ankertags.

Antwoord 2, autoriteit 14%

new-windowis nu verouderd ten gunste van setWindowOpenHandlerin Electron 12 (zie https://github.com/electron/electron/pull/24517).

Dus een meer actueel antwoord zou zijn:

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

Antwoord 3, autoriteit 6%

Als u target="_blank"niet gebruikt in uw anchor-elementen, kan dit voor u werken:

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

Antwoord 4, autoriteit 6%

Verbeterd ten opzichte van het geaccepteerde antwoord ;

1. de link moet target="_blank"zijn;

2. voeg toe in background.js(of waar je je venster ook hebt gemaakt):

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

Opmerking:om dit gedrag in alle toepassingsvensters te garanderen, moet deze code na het maken van elk venster worden uitgevoerd.

Antwoord 5, autoriteit 3%

Ik heb dit niet getest, maar ik neem aan dat dit zou moeten werken:

1) Krijg WebContentsvan uw BrowserWindow

var wc = browserWindow.webContents;

2) Registreer voor will-navigatevan WebContenten onderschept navigatie/linkklikken:

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

3) Implementeer openBrowsermet behulp van child_process. Een voorbeeld voor Linux-desktops:

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

laat me weten of dit voor jou werkt!

Antwoord 6, autoriteit 2%

Voor iedereen die langskomt.

Mijn gebruiksscenario:

Ik gebruikte SimpleMDEin mijn app en de voorbeeldmodus was het openen van links in hetzelfde raam. Ik wilde dat alle links in de standaard OS-browser zouden worden geopend. Ik heb dit fragment, gebaseerd op de andere antwoorden, in mijn main.js-bestand geplaatst. Het roept het aan nadat het de nieuwe BrowserWindow-instantie heeft gemaakt. Mijn exemplaar heet mainWindow

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

Antwoord 7

Controleer of de gevraagde url een externe link is. Zo ja, gebruik dan 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);
  }
}

Antwoord 8

Zet dit in het renderer side js-bestand. Het opent http, https-links in de standaardbrowser van de gebruiker.

Geen JQuery bijgevoegd! geen target="_blank"vereist!

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

Antwoord 9

Voor Electron 5 werkte dit voor mij:

• In main.js(waar u uw browservenster maakt), neemt u ‘shell’ op in uw belangrijkste eis (meestal bovenaan het bestand), bijvoorbeeld:

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

• Voeg binnen de functie createWindow()na mainWindow = new BrowserWindow({ ... })deze regels toe:

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

Antwoord 10

Ik heb het probleem opgelost met de volgende stap

1. Shell toevoegen aan const {app, BrowserWindow} = require('electron')

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

2. NativeWindowOpen instellen is waar

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

3. Voeg de volgende luisteraarcode toe

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

referentie https://stackoverflow.com/a/42570770/7458156door cuixiping

Antwoord 11

Ik gebruik deze regels meestal in een extern .js-script:

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