Embedding JS and HTML at the same time fails

Question

I would like to have many HTML pages of one type, the only difference being the page title and some data stored in different .json files. Everything else should be stored in two centralized files, a .js and an .html file. In pseudocode the pages should look like this:

<html>
<head>
include global_script.js
include specific_data_n.json
</head>
<body>
include global_body.html
</body>
</html>

where the n-th page includes the data file specific_data_n.json but everything else is always the same.

I know how to include .js and .json files in the header. However, I don't really know how to include the .html file in the body. I searched on the net and, in particular, found this question: Server side includes alternative I tried different ways of including the body proposed in the answers but whatever I tried, I got a JS error.

Here is a minimal example of the problem. First, the working file where the body is in the main file and not in an extra file:

    function init(){document.getElementById('demo').innerHTML = '2+2=4';}

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><head>
    <script language="javascript" type="text/javascript" src="minimal.js"></script>
    </head>
    <body onload="init();">
     
    <div id="demo">
    2+2=5
    </div>
     
    </body>
    </html>

Now I tried to put the body in an external file following one of the answers of the question linked above.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="minimal.js"></script>
</head>

<body onload="init();">
    <!-- Content, inclusion from https://stackoverflow.com/questions/35249827/can-you-link-to-an-html-file -->
    <div w3-include-html="body_minimal.html"></div> 
    <script>
(function () {
  myHTMLInclude();
  function myHTMLInclude() {
    var z, i, a, file, xhttp;
    z = document.getElementsByTagName("*");
    for (i = 0; i < z.length; i++) {
      if (z[i].getAttribute("w3-include-html")) {
        a = z[i].cloneNode(false);
        file = z[i].getAttribute("w3-include-html");
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          if (xhttp.readyState == 4 && xhttp.status == 200) {
            a.removeAttribute("w3-include-html");
            a.innerHTML = xhttp.responseText;
            z[i].parentNode.replaceChild(a, z[i]);
            myHTMLInclude();
          }
        }      
        xhttp.open("GET", file, true);
        xhttp.send();
        return;
      }
    }
  }
})();
</script>
</body>
</html>

and the body_minimal.html which is included:

<div id="demo">
2+2=5
</div>

I also tried different further approaches for embedding the body_minimal.html file (which I can present if needed) but none of them works, so I assume that it is some fundamental problem. I always get the error in the JS debugger:

TypeError: document.getElementById(...) is null

I need to add that I have no experience neither in HTML nor in CSS and am mostly copy&pasting stuff from different tutorials, forums and Q&A sites so I do not really understand what this code for the embedding of the HTML file is doing. :)

Thanks for any hint on what the problem might be and a happy new year!

score 1 · Answer 1 · answered Dec 31 '16 at 19:36

1

This really belongs as a comment but unfortunately my account is new so I'm not allowed...An answer will have to do.

If your webhost runs PHP I'd suggest looking into PHP includes, they're much simpler.

Basically, you would save your central html file as a .php file instead and include the HTML file you want using

<?php

include 'global_body.html';

?>

answered Dec 31 '16 at 19:36

seport

35
9

Thanks for the proposal! Unfortunately, the site is hosted on github.io which offers no PHP support. – Photon Dec 31 '16 at 19:40
@Photon — Try one of the higher rated answers on the question you linked to. – Quentin Dec 31 '16 at 19:44
Actually, the highest rated answer works the worst, it just displays {% include head.html %} {% include minimal_body.html %} as output. The other ones also lead to the JS error mentioned in my question... – Photon Dec 31 '16 at 19:46

score 0 · Answer 2 · answered Jan 01 '17 at 12:44

Found a solution which looks stupid, but as you know, if something looks stupid but works, it isn't stupid. :) I just made another .js file which writes the body contents via document.write():

<!DOCTYPE html>
<html>
<head>
<script language="javascript" type="text/javascript" src="script.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript" src="body.js"></script>
</body>
</html>

And the included .js files:

//body.js
document.write('<div id="demo"->2+2=5</div>');

and

//script.js
document.getElementById('demo').innerHTML = '2+2=4';

The only problem is that in a real world scenario the contents of the body are many lines and JS needs a backslash on each line break. Also, the syntax highlighting only shows all the HTML code in one colour as from JS's point of view it is just a string. Therefore I'm still interested in better/cleaner solutions!

Embedding JS and HTML at the same time fails

2 Answers2