综述

详细内容

File

electron 使用 html5 的 FILE API 来与本地文件系统进行操作。DOM 的文件接口提供了本地文件的抽象。electron添加了 path 属性来暴露文件系统中文件的真实路径。

<div id="holder">
  Drag your file here
</div>

<script>
  document.addEventListener('drop', (e) => {
    e.preventDefault();
    e.stopPropagation();

    for (const f of e.dataTransfer.files) {
      console.log('File(s) you dragged here: ', f.path)
    }
  });
  document.addEventListener('dragover', (e) => {
    e.preventDefault();
    e.stopPropagation();
  });
</script>

webview

暂时略过

window.open

//window.open(url[, frameName][, features])
window.open('https://github.com', '_blank', 'nodeIntegration=no')

window.opener.postMessage(message, targetOrigin)

// main process
const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nativeWindowOpen: true
  }
})
mainWindow.webContents.on('new-window', (event, url, frameName, disposition, options, additionalFeatures) => {
  if (frameName === 'modal') {
    // open window as modal
    event.preventDefault()
    Object.assign(options, {
      modal: true,
      parent: mainWindow,
      width: 100,
      height: 100
    })
    event.newGuest = new BrowserWindow(options)
  }
})

// renderer process (mainWindow)
let modal = window.open('', 'modal')
modal.document.write('<h1>Hello</h1>')

Class: BrowserWindowProxy

BrowserWindowProxy 是 window.open 返回的子窗口，位于 renderer 进程。

// method
win.blur() //取消 focus
win.close()
win.eval(code)
win.focus()
win.print() // 触发 打印对话框
win.postMessage(message, targetOrigin) // 发送信息给子窗口

// properties
win.closed