在github的electron中，有没有内置的包含部分html文件的机制？
例如，如果我在 html 中设计布局
<body>
<div>
<ul><li>Menu Item 1</li><li>Menu Item 2</li></ul>
</div>
<div id="dynamic-content">
<!-- I would like this content to be loaded from partial html files -->
</div>
</body>
如何将来自不同文件的内容放入 id 为“动态内容”的 div 中？
【问题讨论】：
标签： electron
我想你的问题已经得到了满意的回答。但是看到这个问题有很多观点，我想我会给人们更多关于这个的信息：
标记的部分（sn-ps、组件等）可以从两个角度加载到 Electron 中；客户端和服务器端。
客户端
当您需要根据用户操作（例如按下按钮时）动态获取内容时。
这在 Electron 中的工作方式与在任何浏览器中相同（当然，您可以访问 file: 协议）。你使用ajax。或任何包含加载 api 的库（ajax 的友好包装器）。所以 jQuery、angular、mithril 等都可以工作。
例子：
$('#dynamic-content').load('file:///my-partial.html')
服务器端
当您想要提供（不是延迟加载，例如使用 angular）模块化 HTML 时，将可重用组件分离到自己的文件中。
模块化标记是大型应用程序的必需品。为此，您将使用某种模板引擎。 EJS 是一个非常受欢迎且很好的选择。
对于服务器端模板，您有两种选择：
1) 预渲染
这可能不是一个选项，具体取决于您的用例。但是如果你事先知道所有变量，你可以简单地编译和渲染每个入口文件，并将结果保存为 html 文件。
使用 ejs 和节点 fs 模块的示例：
let template = fs.readFileSync('my-page.ejs')
let compiled = ejs.render(tpl)
fs.writeFileSync('my-page.html', compiled)
然后正常加载html文件，例如：
myBrowserWindow.loadURL('file:///my-page.html')
2) 拦截file: 协议。
这是真正的交易。 Electron 附带了一个专门为此设计的protocol 模块。这是一个使用 ejs 的伪代码示例：
Intercept all file requests.
If the file is not a `.ejs` file, serve the file.
If the file is a `.ejs` file, render it and serve the result.
然后你就可以将ejs加载到你心中的内容了：
myBrowserWindow.loadURL('file:///my-page.ejs')
我不会在这里包含协议拦截的完整代码示例，因为您可能不会自己实现它。相反，我建议使用为您执行此操作的众多 npm 模块之一：
如果您想自己实现这一点，请查看protocol module 的 Electron 文档。干杯！
【讨论】：
有很多方法可以做到这一点。您根本没有提供有关何时加载动态内容的任何信息。我猜这是对链接的点击。
解决方案与普通网页没有什么不同。
只是给你一个提示：
【讨论】：
您也可以使用这种方法：
<!DOCTYPE html>
<html lang="en">
<head class="head"></script>
<script src="./head.js"></script>
</head>
<body>
</body>
</html>
head.js：
var headers = [
'<meta charset="utf-8">',
'<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->',
'<title>app</title>',
'<link rel="stylesheet" href="../assets/css/solarized.css" type="text/css">',
]
for (var x = 0; x < headers.length; x++) {
$(headers[x]).appendTo('.head')
}
【讨论】：
要补充上一个答案，我还没有找到一种内置方法来包含部分文件并在将它们加载到 BrowserWindow(或者换句话说，服务器端之前处理/渲染它们
但是使用现有的模板引擎，比如ejs 来渲染HTML 服务器端是相当容易的。
我已经在 this answer 中针对类似问题进行了演示。
【讨论】：