在电子应用程序中dynamic加载html文件

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

我不能尝试jQuery加载方法

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

因为我需要加载jQuery的脚本我创build的每个文件的HTML文件。 我试图加载HTML文件的JS方式

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

但基本上会创build一个类似于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 })); } 

如何直接在这个方法中附加页眉和页脚？ 另外我使用快递，如果有帮助。

Answer 1

请参阅这个plunker 1.5angular度的例子，或检查文档。 基本上你想要做这个angular度设置<div ng-include="'yourtemplate.html'"></div> 。

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

我会包装在引导navbar-header类和footer标签为最佳的位置，或任何自定义的div你正在工作。

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

你可以做的另一件事是使用ng-if语句来改变基于某些参数的ng-includes。 任何服务器端模板（如EJS）都可以这样说。