Question

在github的电子中，是否有内置的机制来包含部分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为“dynamic-content”的div？

Answer 1

有很多方法可以做到这一点。完全没有提供有关何时加载动态内容的任何信息。我想这是点击一个链接。

当您使用普通网页时，解决方案并没有什么不同。

只是给你一个提示：

Loading an HTML file into a DIV with a link
How do I load an HTML page in a <div> using JavaScript?
您也可以使用jQuery http://api.jquery.com/load/
或angular也为您提供了这样做的可能性。

Answer 2

我认为您的问题得到了令人满意的答复。但看到这个问题有多少观点，我想我会给这些人更多的信息：

标记的部分（片段，组件，等等）可以从两个角度加载到Electron中;客户端和服务器端。

客户端

当您需要根据用户操作动态获取内容时（例如按下按钮）。

这在Electron中与在任何浏览器中的工作方式相同（当然，您可以访问file:协议）。你使用ajax。或任何包含加载api的库（ajax周围的友好包装）。所以jQuery，angular，mithril等都可以工作。

示例：

$('#dynamic-content').load('file:///my-partial.html')

服务器端

当您想要服务（不是延迟加载，例如使用角度）模块化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模块中的一个为您执行此操作：

electron-jade
electron-pug
ejs-electron（披露：我是本单元的作者）。

如果您想自己动手实施，请查看protocol module的Electron文档。干杯！

Answer 3

要添加到上一个答案，我还没有找到一种内置方式来包含部分文件并在将它们加载到BrowserWindow之前处理/渲染它们（或者换句话说，服务器端）。

但使用现有模板引擎非常容易，例如ejs来呈现HTML服务器端。

我在this answer中向类似的问题证明了这一点。

Answer 4

您还可以使用这种方法：

<!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')
}

如何在github的电子框架中包含部分html？

4 个答案: