In github's electron, is there a built-in mechanism for including partial html files?
for example, if I design a layout in 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>
How would I put content from different files into the div with id "dynamic-content"?
I suppose your question has been answered satisfactorily. But seeing how this question has quite a few views, I figured I'd give the folks a little more info on this:
Partials (snippets, components, whatever) of markup can be loaded in Electron from both angles; client-side and server-side.
Client-Side
For when you need to dynamically fetch content based on user actions (e.g. on button press).
This works the same in Electron as in any browser (except, of course, you have access to the file: protocol). You use ajax. Or any library containing a loading api (a friendly wrapper around ajax). So jQuery, angular, mithril, etc will all work.
Example:
$('#dynamic-content').load('file:///my-partial.html')
Server-Side
For when you want to serve (not lazy-load, e.g. with angular) modular HTML, with reusable components separated into their own files.
Modular markup is a must for large applications. To do this, you'll be using a templating engine of some sort. EJS is a very popular and good choice for this.
For server-side templating you have two options:
1) Pre-render
This may not be an option, depending on your use case. But if you know all variables beforehand, you can simply compile and render each entry file and save the results as html files.
Example using ejs and the node fs module:
let template = fs.readFileSync('my-page.ejs')
let compiled = ejs.render(tpl)
fs.writeFileSync('my-page.html', compiled)
And then load the html file normally, e.g.:
myBrowserWindow.loadURL('file:///my-page.html')
2) Intercept the file: protocol.
This is the real deal. Electron ships with a protocol module designed just for this. Here's a pseudo-code example with 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.
And then you can load ejs to your heart's content:
myBrowserWindow.loadURL('file:///my-page.ejs')
I won't include a full code sample of protocol interception here, as you probably won't be implementing this yourself. Instead, I'd recommend using one of the many npm modules that do this for you:
If you want to take a swing at implementing this yourself, take a look at the Electron documentation of the protocol module. Cheers!
There are many ways to do that. At all you didn't give any information about when you want to load the dynamic content. I guess that it is a click on a link.
The solution is not different, when you would do that with a normal webpage.
Just to give you a hint:
You could also use this approach:
<!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')
}
To add to the previous answer, I haven't found a built in way to include partial files and process/render them before loading them onto the BrowserWindow(or in other words, server-side).
But it's quite easy to use existing template engines, like ejs to render the HTML server side.
I've demonstrated this in this answer to a similar question.
