将 HTML 片段加载到 Electron答案

【问题标题】：Load HTML fragments into Electron将 HTML 片段加载到 Electron
【发布时间】：2018-03-21 21:17:47
【问题描述】：

我正在尝试开发一个支持基本插件架构的 Electron 应用程序。 main.js 进程加载一个基本上是空的“欢迎”页面，除了某种标题部分，其中包含一个列出可用插件的下拉菜单。

每个插件都有自己的renderer.js 文件、配置数据等。它还提供了在div#plugin-container 中显示所需的HTML。我希望渲染器进程将 HTML 片段加载到上述div 内的现有网页中。

我了解win.loadURL() 仅适用于main.js，它会加载 HTML 以填充整个窗口。我正在寻找将片段加载到现有页面中。 jQuery 有 $('div#plugin-container').load() 方法可以满足我的需要，但据我所知，它只从服务器加载 HTML。我想从 Electron 应用程序中加载它。

有什么想法吗？

披露：我之前在 Atom 讨论区 here 上发布了此消息，但希望得到 SO 社区的更好回应。

【问题讨论】：

你对react这样的框架持开放态度吗？
@Rhayene 有趣的是你应该问这个问题，我在最初的问题中有一段话说我想避免反应和类似的框架，以免添加到我必须学习的东西中。不过我最终可能会到达那里。 :-)
你好，如何动态执行插件的renderer.js脚本？
@VIPPER 看看这里，不确定它是否回答了你的问题：github.com/jfix/pac-toolkit - 我有一段时间没看这段代码了。

标签： javascript electron

【解决方案1】：

无论您以何种方式访问 HTML，如果您将其解析为字符串，您始终可以在页面中呈现它。如果您想从文件中读取，可以执行以下操作：

const fs = require('fs')

fs.readFile('path/to/thehtml.html', (err, data) => {
   document.getElementById('some-element').innerHTML = data
})

如果您希望用户选择文件，您应该使用 Electron 的 dialog API，它允许您通过对话框提示用户选择文件。或者你可以有一个输入，他们可以输入文本并从那里阅读。

【讨论】：

谢谢@limoragni，我今晚试试。
是的！有用！我必须将error 添加为匿名函数调用（(error, data) => { ... }）的第一个参数，但它现在可以工作了！谢谢！
哦，是的，我错过了 err 参数。感谢您指出了这一点。我编辑了我的答案。