使用 Electron 打開外部連接或文件管理器

使用 Electron 打開外部連接或文件管理器

此係列文章的應用示例已發佈於 GitHub: electron-api-demos-Zh_CN. 能夠 Clone 或下載後運行查看. 歡迎 Star .

Electron 中的 shell 模塊容許您訪問某些本地元素, 如文件管理器和默認 Web 瀏覽器.

此模塊在主進程和渲染器進程中均可以工做.

在瀏覽器中查看 完整 API 文檔.

在文件管理器中打開路徑

支持: Win, macOS, Linux | 進程: Both

當前示例使用 shell 模塊在特定位置打開系統文件管理器.

單擊示例按鈕將在根目錄中打開文件管理器.

渲染器進程

const shell = require('electron').shell

const os = require('os')

const fileManagerBtn = document.getElementById('open-file-manager')

fileManagerBtn.addEventListener('click', function (event) {
  shell.showItemInFolder(os.homedir())
})

打開外部連接

支持: Win, macOS, Linux | 進程: Both

若是您不但願在當前應用程序中打開網站連接, 能夠使用 shell 模塊在外部打開. 當點擊連接以後將在用戶的默認瀏覽器中打開.

當點擊示例按鈕時, 將在您的瀏覽器中打開 Electron 的網站.

渲染器進程

const shell = require('electron').shell

const exLinksBtn = document.getElementById('open-ex-links')

exLinksBtn.addEventListener('click', function (event) {
  shell.openExternal('http://electron.atom.io')
})

高級技巧

在外部打開全部出站連接.

您可能須要打開應用外部的全部 http 和 https 連接. 爲此, 查詢文檔並循環遍歷每一個連接並添加一個監聽器. 此應用程序使用位於 assets/ex-links.js 下面的代碼.

渲染器進程

const shell = require('electron').shell

const links = document.querySelectorAll('a[href]')

Array.prototype.forEach.call(links, function (link) {
  const url = link.getAttribute('href')
  if (url.indexOf('http') === 0) {
    link.addEventListener('click', function (e) {
      e.preventDefault()
      shell.openExternal(url)
    })
  }
})

若是這邊文章對您有幫助, 感謝 下方點贊 或 Star GitHub: electron-api-demos-Zh_CN 支持, 謝謝.