web-dev-qa-db-ja.com

ブラウザーウィンドウから外部リンクを強制して、Electronのデフォルトブラウザーで開くにはどうすればよいですか？

BrowserWindow を使用してアプリを表示していますが、外部リンクをデフォルトのブラウザーで強制的に開きたいと思います。それも可能ですか、それとも違うアプローチをしなければなりませんか？

node.jselectron
35
Lipis

前の答えから解決策を確認した後、私はこれを思いつきました。

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

電子仕様 によると、外部リンクがクリックされるとnew-windowが起動されます。

注：アンカータグでtarget="_blank"を使用する必要があります。

75
René Herrmann

anchor要素でtarget="_blank"を使用していない場合、これはうまくいくかもしれません：

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

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

私はこれをテストしていませんが、これはうまくいくはずです：

1）WebContentsの-​​ BrowserWindow を取得

 var wc = browserWindow.webContents;

2） will-navigate of WebContentに登録し、ナビゲーション/リンクのクリックをインターセプトします。

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

3） child_process を使用してopenBrowserを実装します。 Linuxデスクトップの例：

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

これがあなたのために働くかどうか私に知らせてください！

3
Yan Foto

来てくれる人のために。

私のユースケース：

私はアプリで 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)
  }
})
3
Patrick Lee

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

Electron 5では、これが私にとってはうまくいったものです：

  • _main.js_（ブラウザウィンドウを作成する場所）で、メインのrequireステートメント（通常はファイルの先頭）に「シェル」を含めます。例：

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

0
Jaifroid