electron踩坑以及与远端页面交互

1、尝试在远端网页直接require('electron')报以下错误

报该错误是因为当前窗口不能访问到node.js环境

Electron的一个主要特性就是能在渲染进程中运行Node.js，html或者vue项目不能直接require('electron')

想要壳与网页分离，并且达成交互，需要双向定义事件，而electron只需在壳中引用

2、创建浏览器窗口

// main.js

mainWindow = new BrowserWindow({

    width: 360,

    height: 600,

    x: 0,

    y: 0,

    autoHideMenuBar: true,

    // icon:path.join(__dirname, 'favicon.ico'),

    alwaysOnTop: true,

    // closable: false,

    // frame: false,

    webPreferences: {

      nodeIntegration: true,

      webSecurity: false, //禁用同源策略

      plugins: true, //是否支持插件

      nativeWindowOpen: true, //是否使用原生的window.open()

      webviewTag: true, //是否启用 tag标签

      // preload: path.join(app.getAppPath(), './static/preload.js'),

      sandbox: true,    //沙盒选项,这个很重要

    }

  })

---

3、预加载文件方式：

这里预加载文件可以通过new BrowserWindow中的preload，也可以

mainWindow.webContents.session.setPreloads([  //这里的 setPreloads接收数组

  path.join(__dirname, 'static/preload-get-display-media-polyfill.js'),

  path.join(__dirname, 'static/preload.js')

])

---

加载远程URL

const options = { extraHeaders: 'pragma: no-cache\n' }  // options 使加载忽略 http 缓存  

mainWindow.loadURL('https://github.com', options  ) 

3、electron与远端网页交互

// 远端网页中定义如下， fromWebToElectron定义在electron, ifElectronWantClose定义在远端网页

window.fromWebToElectron('这里是我要告诉electron的内容，比如主要传参或主动请求数据', function(a){

      console.log("这里是回调，拿到要请求的数据", a)

    })

    window.ifElectronWantClose= function(){

      console.log("electron壳告诉我要关闭窗口了,在这里执行窗口关闭前是事件")

    }

// electron接收传参或主动talk

// preload.js

const { ipcRenderer} = require('electron')

window. fromWebToElectron = function (a, callback) {

    console.log('electron收到远端的传参', a)

    callback(config)  // 回调给远端的请求数据，如config

    ipcRenderer.send('close'，'传参')  // 比如收到请求关闭窗口

}

// main.js 监听主进程当前窗口关闭，关闭前

mainWindow.on('close', (e, a) => {

  console.log("窗口马上要关闭了",)

  mainWindow.webContents.send(" ifElectronWantClose")

})

4、sandbox 沙盒选项

Chromium主要的安全特征之一便是所有的blink渲染或者JavaScript代码都在sandbox内运行。 在sandbox模式下，渲染器只能通过IPC委派任务给主进程来对操作系统进行更改 ，但是 sandbox 模式开启，electron不能访问到远端网页中的window属性， 唯一的例外是预加载脚本；

若 sandbox 设为false, 远端网页挂有插件，当网页在壳中运行，插件所有挂载将会失效，即undefined

因此，electron想要与远端页面交互，且挂有插件或有window交互内容， sandbox必须开启，可以将逻辑写在预加载脚本中

5、 sandbox 模式下，文件之间相互调用（如：preload.js中访问config.js对象）不能直接require，调用方式如下：

方式1：

// preload.js

const config = remote.require('./static/config.js')  //这里remote对象还是与main.js一个层级，因此不能直接./config.js

方式2：

// main.js

const config = require('./static/config.js')

global.config = config  //挂在到global

// preload.js

const { remote } = require('electron')

const config = remote.getGlobal("config")