在电子应用程序中动态加载 html 文件答案

【问题标题】：Dynamically loading html files in electron application在电子应用程序中动态加载 html 文件
【发布时间】：2017-03-04 14:39:32
【问题描述】：

我是 JS 开发的新手，基本上来自 PHP 背景。我想知道是否有一种方法可以像我们在 codeigniter（加载视图）中那样包含 html 页面。我试图为我的电子应用程序创建一个模板结构，其中页眉和页脚文件被加载到每个请求的 html 页面上。

我无法尝试 jQuery 加载方法

$('#footer').load('header.html');

因为我需要在我创建的每个文件 html 文件的页脚中加载 jquery。我尝试了JS加载html文件的方式

document.getElementById("head").innerHTML='<object type="text/html" data="header.html" ></object>';

但这基本上会创建一个类似于 iframe 的对象，因此您的资源永远不会习惯于使用 link 和 script 标签加载的方式。

我有一个 main.js 文件，主页将从那里加载：

function createWindow () {
 // Create the browser window.
  mainWindow = new BrowserWindow({width: 1280, height: 742, resizable:false})

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

如何在这种方法中直接附加页眉和页脚？如果有帮助，我也会使用 express。

【问题讨论】：

你用的是什么模板引擎？你说你正在使用 Express。通常您使用模板引擎，除非您使用 SPA（角度等）。
Angular 会有我所说的模板方案吗？
是的，您可以使用ngInclude 引入页眉和页脚。如果你愿意，我可以提供使用 ejs 和 Angular 的示例
是的，请...谢谢

标签： javascript node.js express electron

【解决方案1】：

请参阅plunker 以获取角度 1.5 示例，或查看文档。基本上你想为角度设置做这个<div ng-include="'yourtemplate.html'"></div>。

对于 EJS 模板，您可以执行 <% include includes/header.ejs %> 之类的操作

我会将它们包装在引导程序 navbar-header 类和 footer 标记中以获得最佳位置，或者您正在处理的任何自定义 div。

现在，在 Electron 中使用这些文件时，我会将这些文件合并到您的“主”浏览器窗口中，这样当应用程序运行时，您引用的 index.html 文件总是会加载这些文件。

您可以做的另一件事是使用 ng-if 语句根据某些参数更改 ng-includes。任何服务器端模板都可以这样说，例如 EJS。

【讨论】：