Electron 与远端页面交互使用本地资源

Electron 页面加载方式有两种：

• 加载本地文件
• 通过 http 网络请求页面

加载本地资源的文件可以很方便的使用本地环境。此处不再赘述。但是在 http 请求的资源中，我们如何调用到 electron/NodeJS 的 API 呢？答案是使用 electron 提供的 preload 方法来给页面附加 nodejs/electron 运行环境。

关于 preload

preload 是 electron 的 BrowserWindow 提供的一种预加载的脚本。该脚本在页面运行其他脚本之前运行。在该脚本中，无论页面是否集成了 Nodejs，此脚本中的内容都可以访问所有的 NodeJS API。

preload 的详细信息参考BrowserWindow

代码参考

HTML

  
  
  


First Pages

Main.js

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

let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadURL(html 地址)

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

ipcMain.on('close', (e, a) => {
  mainWindow.webContents.send('ifElectronWantClose', [a]);
});

ipcMain.on('write_file_success', (e, a) => {
  mainWindow.webContents.send('saveDataToFileSuccessListener', [a]);
});

app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  if (mainWindow === null) createWindow()
})

Preload.js

// electron接收传参或主动talk

// preload.js

let {ipcRenderer} = require('electron');
let fs = require('fs');
let path = require('path');

window.saveDataToFile = function (name, fileString, callback) {
    let fPath = path.join('C:\\Users\\melon\\Desktop\\新建文件夹', name);
    fs.writeFileSync(fPath, fileString);
    callback(`write file to ${'fPath'} success`);
    ipcRenderer.send('write_file_success', 'args aaa'); // 比如收到请求关闭窗口
};

ipcRenderer.on('saveDataToFileSuccessListener', (e, args) => {
    window.saveDataToFileSuccessListener(args[0]);
});

window.fromWebToElectron = function (a, callback) {
    console.log('electron收到远端的传参', a);
    callback('config result'); // 回调给远端的请求数据，如 config
    ipcRenderer.send('close', 'args bbb'); // 比如收到请求关闭窗口
};

ipcRenderer.on('ifElectronWantClose', (e, args) => {
    window.ifElectronWantClose(args[0]);
});

至此，我们只要在 preload 中提供了适当的方法，就可以通过 https 加载远端的网页操作本地资源了。

运行效果如图：

效果.jpg

关于 sandbox

当 webPreferences 中 sandbox 设置为 true 的时候，preload 中的脚本能够调用的 API 被限制了。仅能够访问到 electron 的一部分 API。但是这时候可以通过 IPC 通信的机制，使用主进程来访问被限制的 API。对安全考虑较多的，可以考虑使用这个。