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

Question

在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 为 "dynamic-content" 的 div 中？

Answer 1

有很多方法可以做到这一点。您根本没有提供有关何时加载动态内容的任何信息。我猜这是对 link 的点击。

解决方案与普通网页相同。

给你一个提示：

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

为了补充前面的答案，我还没有找到一种内置的方法来包含部分文件和 process/render 它们，然后再将它们加载到 BrowserWindow（ 或换句话说，服务器端).

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

我已经在中对类似问题进行了演示。

Answer 3

我想你的问题已经得到了满意的回答。但是看到这个问题有很多观点，我想我应该给大家更多关于这个的信息：

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

客户端

For when you need to dynamically fetch content based on user actions (e.g. on button press).

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

示例：

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

服务器端

For when you want to serve (not lazy-load, e.g. with angular) modular HTML, with reusable components separated into their own files.

模块化标记对于大型应用程序来说是必须的。为此，您将使用某种模板引擎。 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 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？

How can I include partial html in github's electron framework?

electron