Question

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

我无法尝试jQuery加载方法

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

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

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
  }));
}

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

Answer 1

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

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

之类的操作

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

现在，当谈到在Electron中使用它们时，我会将这些文件合并到您的主要内容中。 browserWindow，因此当应用程序运行时，您引用的index.html文件始终会加载这些文件。

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

动态加载电子应用程序中的html文件

1 个答案: