All geek questions in one place

How to include partial html in github electronic structure?

Does github electron have a built-in mechanism for including partial html files?

for example if i create 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 a div with the id of "dynamic-content"?

+5
source share
3 answers

There are many ways to do this. In fact, you did not specify when you want to download dynamic content. I assume this is a click on the link.

The solution is no different if you do this with a regular web page.

Just to give you a hint:

+2
source

I believe that your question has been answered satisfactorily. But, seeing how this question has several views, I decided that I would give people a little more information about this:

Particles (fragments, components, any) of the markup can be loaded into the electron from both angles; client and server sides.

on the client side

If you need to dynamically retrieve content based on user actions (for example, when you click a button).

This works the same in Electron as in any browser (except, of course, you have access to the file: protocol. You are using ajax. Or any library containing api loading (a friendly shell around ajax). So jQuery, angular, mithril etc. They will work.

Example:

 $('#dynamic-content').load('file:///my-partial.html')

server side

If you want to use (not lazy-load, e.g. angular) modular HTML, with reusable components split into your own files.

Modular markup is a must for large applications. For this you will use some kind of template engine. AJS is a very popular and good choice for this.

For the server template, you have two options:

1) Pre-rendering

This may not be an option, depending on your use case. But if you know all the variables in advance, you can simply compile and display each recording file and save the results as html files.

An example of 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, for example:

 myBrowserWindow.loadURL('file:///my-page.html')

2) Intercept the file: protocol.

This is the real deal. Electronic ships with a protocol module designed specifically for this. Here is an example of pseudocode 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 the ejs into your hearty content:

 myBrowserWindow.loadURL('file:///my-page.ejs')

I will not include the full protocol interception code example here, since you probably will not implement it yourself. Instead, I would recommend using one of the many npm modules that will do this for you:

If you want to make a swing during its implementation, check out the Electron module documentation. Hooray!

+2
source

To add to the previous answer, I did not find a built-in way to include partial files and process / render them before downloading to BrowserWindow ( or, in other words, on the server side ).

But it's pretty easy to use existing template engines , such as ejs , to render an HTML server.

I demonstrated this in this answer to a similar question.

0
source

Source: https://habr.com/ru/post/1239684/

More articles:


All Articles