Dynamically loading html files in electron application

Question

I'm new to JS development, basically from PHP Background. I was wondering if there is a way of including html pages like we do in codeigniter(loading views). Im trying to create a template structure to my electron application where header and footer file is loaded on every html page requested.

I cant try the jQuery load method

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

as I would need to load jquery in footer of every file html file I create. I tried the JS way of loading html files

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

but that basically creates an object which is similar to an iframe so your resources never gets used to the way you would load using link and script tags.

I have a main.js file from where the home page would be loaded:

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

How do i attach the header and footer directly in this method? Also I'm using express if that helps.

What template engine are you using? You said that you are using Express. Typically you use a template engine unless you are going with a SPA (angular, etc). — unseen_damage
– unseen_damage, Commented Mar 7, 2017 at 19:51
Yes, you can use ngInclude to bring in a header and footer. I can provide examples using ejs and angular if you want — unseen_damage
– unseen_damage, Commented Mar 8, 2017 at 13:45

unseen_damage · Accepted Answer · 2017-03-09 20:54:17Z

1

Please see this plunker for an angular 1.5 example, or check the documentation. Basically you want to do this <div ng-include="'yourtemplate.html'"></div> for the angular setup.

For EJS templates, you would do something like <% include includes/header.ejs %>

I would wrap those in the bootstrap navbar-header class and footer tags for optimal placement, or any custom div that you are working on.

Now, when it comes to using these in Electron, I would incorporate these files into your 'main' browserWindow, so that when the application runs, the index.html file you are referencing always has these files loaded.

Another thing you can do is use ng-if statements to change the ng-includes based on certain parameters. The same can be said with any server side template like EJS.

edited Mar 9, 2017 at 20:54

answered Mar 9, 2017 at 14:16

unseen_damage

1,3763 gold badges15 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically loading html files in electron application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related