我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

在electron迎来3.0之际，一些备受诟病的函数和特性，也获得了改善和提升。其中，最显著的莫过于每个electron的一个入口函数了，那就是loadUrl()函数。目前最新的electron3.x系列，支持一个新的函数叫做loadFile()，简直是比原来的loadUrl()加载本地页面不知道要好用多少倍。

苏南大叔：electron 3.x 系统新增加的页面加载函数 loadFile - electron-loadfile
electron 3.x 系统新增加的页面加载函数 loadFile（图3-1）

低版本electron不支持loadFile

在1.x和2.x的electron中，如果要使用loadFile函数，就会报错unknown function。

苏南大叔：electron 3.x 系统新增加的页面加载函数 loadFile - loadfile_unknown
electron 3.x 系统新增加的页面加载函数 loadFile（图3-2）

Uncaught Exception:
TypeError: mainWindow.loadFile is not a function
    at App.createWindow (/Users/sunan/Downloads/electron-quick-start-master/main.js:13:14)
    at emitTwo (events.js:130:20)
    at App.emit (events.js:213:7)
Plain text

loadFile 对比 loadUrl

main.js：

mainWindow = new BrowserWindow({width: 800, height: 600})
JavaScript

都是加载本地的index.html页面，loadFile 和 loadUrl对比如下：

electron3.x写法：

mainWindow.loadFile('index.html')
JavaScript

传统2.x及1.x中的写法：

  // and load the index.html of the app.
  const path = require('path')
  const url = require('url')
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
JavaScript

特别提示

对于简写的loadFile('index.html')，因为是相对路径。所以，特殊情况下，会导致相对出别的首页的问题。所以，最好还是写绝对路径。苏南大叔个人建议，碰到显示默认首页，而不是你自己写的那个首页的时候，请想想苏南大叔的这段话。

const path = require('path')
mainWindow.loadFile(path.join(__dirname, 'index.html'))
Plain text

下面的这个截图，其实是个错误的loadfile，并没有load到苏南大叔自己写的那个页面。就是因为没有写绝对地址，而是写的相对地址的缘故。这个截图来自：使用vscode调试主进程的时候。

苏南大叔：electron 3.x 系统新增加的页面加载函数 loadFile - loadfile-wrong-page
electron 3.x 系统新增加的页面加载函数 loadFile（图3-3）

loadURL的另外两个例子

加载远程URL:

win.loadURL('https://github.com')
JavaScript

加载本地HTML文件:

win.loadURL(`file://${__dirname}/app/index.html`)
JavaScript

总结

经过对比，苏南大叔表示：这个新的loadFile函数，真心是好用到爆了。哈哈哈~

更多electron新鲜经验文章，请点击苏南大叔的文章：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   electron