Menu
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"?
483
With an improved runtime and great integration with JavaScript and Node. js, Electron JS makes both designing desktop apps and maintaining them on cross platforms easier and better.
Electron allows you to use JavaScript on the front end, just like a normal website. It also lets you use Node. js for accessing files and other system-related operations. Because Electron allows you to use JavaScript for everything, it has become popular as a way to make JavaScript desktop apps.
Electron uses Chromium and Node.js so you can build your app with HTML, CSS, and JavaScript.
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!
72
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:
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
