Load context from html

Posted by Bruce Liu on , updated on July 10, 2020

🏷️ Tags: html

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


Share on:

« PREVIOUS: First release of adaptive-curvefitting
NEXT: Differences between dissolve and union in geoproceesing »