Include local html fragments within local html main container

Question

Background

I want to stop using Latex for creating documentation and automatic reports for my applications and I would prefer to use html+css that I may later convert to pdf using wkhtml2pdf that allow for adding cover page, table of content, headers, footers, all in A4 separated pages.

wkhtml2pdf is light exe and supports for scripts/css for advanced document pre-processing / formatting. So, so far, so good, it all seems html+css is my best option to replace Latex ...

Issue

In order to ease maintenance and not to put all documentation content in a single file, I had initially thought to organize my local files like this:

doc/index.html

docs/includes/introduction.html
docs/includes/part1.html
docs/includes/part2.html

docs/resources/mystyle.css
docs/resources/jquery-3.1.1.min.js

And write main documentation index.html as follow:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <script src="./resources/jquery-3.1.1.min.js"></script>

    <script>
      // When document is ready, feed divs with real content
      $(document).ready(function() 
      {     
        $('#Introduction').load('./resources/introduction.html');
        $('#Part1').load('./resources/part1.html');
        $('#Part2').load('./resources/part2.html');         
      });       
    </script>
  </head>

  <body>
    <div id="Introduction"></div>
    <div id="Part1"></div>
    <div id="Part2"></div>  
  </body>
</html>

Unfortunately doing this way, I receive a XMLHttpRequest error basically telling that it cannot load files because cross-origin is only supported for http, data, chrome, https etc... protocols (?? even though all my files are local and main.html was also launched from local file system --so all same origin-- ??).

I tried many workarounds (link rel=import, w3IncludeHTML, use iframe and try to read content) they all fall in cross-origin issue.

Question

Is there an easy/light solution to merge all local html fragments in local main.html file (i.e no external grep or extra tools, just basic html+javascript) ?

NB1: I know I can change flags in chrome browser to allow cross-origin but would like to avoid this. First, for security reason. Second, because I can't do the same when sending files to wkhtml2pdf converter. Third because is not easy to provide documentation as is and say "just click index.html to open documentation in web-browser".

NB2: Documentation fragments is very likely to be just <section>, <p>, <img>, <table> elements all merged in body of main.html managing for css-formatting and other stuff in a single place.

Did you solve the problem? Why can't you setup a local http server? With node.js for example it takes only a few lines. — Supersharp, Jan 03 '17 at 22:58
@Supersharp I haven't found solution, so I put everything in a single html file (http://stackoverflow.com/q/40497481/684399). The reason I don't won't to use a local http server is that I'm trying to create automatic reports (all in html+css+javascript) so they can be easily be viewed and eventually printed to pdf or paper from any web-browser by customers (too complex to ask them to install local server just to view documents/reports) — CitizenInsane, Jan 04 '17 at 08:44

score 1 · Accepted Answer · answered Jan 04 '17 at 11:17

You can get local files in Firefox, using XMLHttpRequest.

It used to work with Chrome, but a "security" restriction has been introduced since 2010 for local files.

Maybe you can suggest to use Firefox to all your customers...

A workaround (for Chrome) could be to load ressources as <script>, and get the content in multiline strings.

In index.html:

<script src="ressource1.js"></script>
...

In ressource1.js:

var fragment1 = `
     <section>
         HTML content for part 1 
     </section>`
document.querySelector( '#target1' ).innerHTML = fragment1

Ressources are kept in separate files (in form of JavaScript) and injected in the main HTML document.

Maybe it would be worth to provide an Electron application along with your documentation files to browse it without web server.

Actually it's a node.js web server packed with a chromuim browser. It targets most platfoms and you just need your HTML/JS/CSS skills. By the way you could also integrate a PDF library inside.

Thanks for this workaround ... I indeed now suggest to customers to use firefox because repeating table headers/footers [doesn't work with chrome when printing](http://stackoverflow.com/q/40497481/684399) ... I may also force them to use firefox for reading, so it can ease maintenance on my side with multiple fragments as [chrome also has restrictions on that](http://stackoverflow.com/a/40264503/684399). — CitizenInsane, Jan 04 '17 at 14:50

Include local html fragments within local html main container

1 Answers1