Self-held html file

Place it into _includes.
Add the following Liquid code to where you want to post contents of the html.
```
{ % include load_html_test.html % }
```
load_html_test.html is the filename for the test html.
View the output.

html held by 3rd-party

This is a tutial - How TO - Include HTML from W3Schools.

Prepare the HTML you want to include. A html file named myu_hhu_cn.html held on Github in my case.

Place the following javascript into your page.

<script>
  function includeHTML() {
      var z, i, elmnt, file, xhttp;
      /*loop through a collection of all HTML elements:*/
      z = document.getElementsByTagName("*");
      for (i = 0; i < z.length; i++) {
          elmnt = z[i];
          /*search for elements with a certain atrribute:*/
          file = elmnt.getAttribute("w3-include-html");
          if (file) {
              /*make an HTTP request using the attribute value as the file name:*/
              xhttp = new XMLHttpRequest();
              xhttp.onreadystatechange = function() {
                  if (this.readyState == 4) {
                      if (this.status == 200) {elmnt.innerHTML = this.responseText;}
                      if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
                      /*remove the attribute, and call this function once more:*/
                      elmnt.removeAttribute("w3-include-html");
                      includeHTML();
                  }
              }      
              xhttp.open("GET", file, true);
              xhttp.send();
              /*exit the function:*/
              return;
          }
      }
  };
</script>

Include the HTML by using a w3-include-html attribute.

<div w3-include-html="https://raw.githubusercontent.com/longlovemyu/profile/master/myu_hhu_cn.html"></div>

Call javascript function includeHTML() at the bottom of the page.
```
<script>includeHTML();</script>
```
View the output.

Reference

How TO - Include HTML

Share on:

Load context from html

Self-held html file

html held by 3rd-party

Reference

Related