Electron中的坑和经验

#1 控制<webview>中弹出的窗口

需要监听一个<webview>的弹窗事件时，有两种方法：

document.getElementById('webview1').addEventListener('new-window', (e) => {
  console.log(e.url)
}

和

document.getElementById('webview1').addEventListener('dom-ready', () => {
  const contents = document.getElementById('webview1').getWebContents();
  contents.on('new-window', (event, url) => {
    event.preventDafault();
    console.log(url);
  });
});

第一种更简单。
第二种看起来支持阻止事件传播，但实际上，如果启用<webview>的allowpopups，窗口仍会弹出。
一种好的做法是，禁用allowpopups，使用第一种方法来监听，并发送想要的url给主进程，由主进程创建和管理window。

#2 使用require.js的页面加载报错

有些页面使用了require.js加载模组，它增加了require()方法，这和node自身require的关键字冲突，可能带来错误或其他无法预测的问题。
在这种页面中，应该设置：

new BroswerWindow({
  webPreferences: {
    nodeIntegration: false,
  }
});

特别的是，如果是webview中弹出的窗口，并不存在这个问题，因为其默认关闭了这个选项。

#3 session.webRequest中使用file://协议

如果使用session.webRequest.onBeforeRequest(listener)来拦截并替换页面中的请求，需要提供一个redirectURL。
在window的url为file://...时，不存在任何问题。但当url为远程url时，会报错：Not allowed to load local resource。这是浏览器的安全限制。
所幸Electron提供了API以修改这种限制。
设置window的属性如下：

webPreferences: {
  webSecurity: false
}

这时file://...指向的本地文件可以正常加载。
另外，webPreferences.allowRunningInsecureContent也是同类型的设置项，决定是否允许https页面中加载http资源。

#4 <webview>设定attr.src时不能指向新页面

某些条件下会遇到这个问题。换为iframe则正常刷新。
测试的一种解决方法是，隔一定时间后，再设置src。至少10ms。

------ 2018-3-28更新 ------
经测试发现，当<webview>的样式（或其上级元素的样式）为display:none时，为其设定src会无效。
有时我们希望<webview>平时隐藏，等到src设定好后再加载。
具体实施时，可以不使用display:none隐藏元素，而是使用width:0;height:0等方式。

------ 2018-3-29更新 ------
如果更改webview的src，可能会因src加载需要时间，而产生src变更，webview内显示仍为原来页面的情况。
可以为webview注册commit-load和dom-ready监听器，在其开始加载时隐藏，在其加载好DOM时显示。注意隐藏不要用display:none。

#5 持续打包

如果需要打包应用程序，最好从开发之始就经常build并验证程序是否正确执行。
否则最后打包时发现程序不能运行，再找问题就很难了。
推荐使用electron-forge来生成项目。对已经写好的项目，也可以逐步移植到electron-forge生成的初始项目里。
一般我们还需要设置忽略的文件、图标等，这些设置可能在electron-forge的文档中找不到。其实这个库本身是多个库的集合，很多设置需要去其依赖的库的文档里找。
下面列出一些重要配置项：

// package.json
{
  "productName": "扫雷", // 应用名
  "version": "1.0.0", // 版本
  "description": "游信审核器Electron版", // 鼠标移到应用图标上时显示的描述
  "config": {
    "forge": {
      "electronPackagerConfig": {
        "icon": "./static/icon.ico", // 应用图标
        "ignore": "(.idea)|(lite.db)" // 打包时忽略的文件(夹)
      }
    }
  }
}