Website based on a single HTML page

    When there are so many new technologies around, it’s not easy to understand which time is worth exploring.
    (Karl Seguin)

    Now an interesting time has come when some new technologies are rapidly changing with other new ones, which are also changing rapidly. The positive derivative of this process is that while this technological kaleidoscope is spinning, there will be work for the developer. But, sometimes problems arise, for the solution of which, speaking in figurative language, it is better not a new chainsaw, but a nail file in an old penknife.

    Image - Website based on one HTML page

    The article shows the site development technique when the main result is achieved through the use of basic mechanisms of open standards.

    Architecture: Frontend, static HTTP server, XmlHttpRequest (XHR), REST.

    IDE: Notepad, Notepad ++ (Windows), Gedit (Linux).

    Compatibility: The browser must support JavaScript and HTML DOM.

    The essence of the reception


    The site is developed on the basis of an HTML page through which access to content files is organized. HTML pages, as designed by the developer, can be any number, but, to achieve full functionality, one will be enough. In an HTML page, links to content files are described as regular HTML links according to REST rules. Due to the location of links in one place, referential integrity is achieved.

    The content is located in text files and is text formatted with typical HTML markup. There are no restrictions on the location of content files, but it will be logical if they are placed in thematic sections (directories). Content files are not associated with an HTML page and can be displayed on one or more HTML pages.

    The HTML page is loaded first. Then the content file is determined and uploaded. The name of the content file is written in the URL of the HTML link and is determined by REST rules. The content file is uploaded via XHR.

    There are no restrictions. Design, code, variable names and other development agreements are typical for such developments. There is no special markup commonly used for templates.

    All this is a bit like SSI, only on Frontend.

    How it works


    Read the URL of the HTML link and determine the parameters:
    function getUrlParametr(parName) {
      var params = location.search.substring(1).split("&");
      for (var i = 0; i < params.length; i++) {
          if (params[i].split("=")[0] == parName) {
              return params[i].split("=")[1];
          }
      }
      return "";
    }
    

    The number and name of the parameters are determined by the developer, the main thing is that the HTML page provides functionality for processing them.

    Download and display content:
    function loadXMLDoc(divName, contentFile) {
      var xmlhttp=new XMLHttpRequest();
      xmlhttp.onreadystatechange = function()
      {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
          document.getElementById(divName).innerHTML = xmlhttp.responseText; // отобразить контент
        }
      }
      xmlhttp.open("GET",contentFile,true);
      xmlhttp.send();
    }
    

    The parameter “id” sets the location of the content file, which is determined after loading the HTML page:
    function onPageLoad() {
      var paramId = getUrlParametr("id");
      if(paramId == "")   paramId = "/xdata/news.htm"; // дефолтный контент
      loadXMLDoc("div_body",paramId);
    }
    


    The HTML link is designed so that the HTML page refers to itself, but with different values ​​for the id parameter:
    ИТ копилка

    To add new content, you just need to create a content file and add an HTML link. The content file extension can be any, but it will be more convenient if it matches the well-known MIME type, for example, “txt” or “htm”. So it will be easier to transfer the site to an external resource.

    These are key aspects for creating an information site. Interactivity, if necessary, can be added based on web services. If more than one HTML page is used, then it is possible, for example, to develop one menu for all pages, which will be loaded on the same principle as the content. This will facilitate maintaining referential integrity, but the payback will be an extra XHR request.

    How to insert an HTML page instead of a content file


    To insert another HTML page into the base HTML page, the easiest way is to use the iframe HTML tag. In this case, XHR is not needed. You need to add another parameter to the URL, for example, “iframe”, and process it when loading the basic HTML page:
    function onPageLoad() {
      var paramId = getUrlParametr("id");
      var paramIframe = getUrlParametr("iframe");
      if(paramId == "")   paramId = "/it/it-box.txt"; // дефолтный контент
      if(paramIframe == "" || paramIframe == "0") loadXMLDoc("div_body",paramId);
      if(paramIframe == "1") document.getElementById("div_body").innerHTML = "";
    }
    

    The key difference is that the content file will be embedded in the DOM of the basic HTML page and will be processed in a single CSS, but the HTML page loaded in the iframe will not.

    When the HTML page is not at the root


    Sometimes it is necessary to develop not the whole site, but, for example, a thematic section. In order for HTML links to remain relevant, you must consider the path to the section:
      function onPageLoad(rootPath) {
        var paramId = getUrlParametr("id");
        var paramIframe = getUrlParametr("iframe");
        if(paramIframe == "" || paramIframe == 0) {
          if(paramId == "")   paramId = rootPath + "/it/it-box.txt"
          else paramId = rootPath + paramId;
          loadXMLDoc("div_body",paramId);
        }
        if(paramIframe == 1) {
          paramId = rootPath + paramId;
          document.getElementById("div_body").innerHTML = "";
        }
        if(paramIframe == 2) {
          document.getElementById("div_body").innerHTML = "";
        }
      }
    }
    


    This is, for example, the example code for an article on GitHub.

    Ready template


    If you have any questions, you can watch the demo site (GitHub) and download the site template (GitHub) . The demo and template are a ready-made layout and are filled with harmless content.

    Development can be done on any static HTTP server installed locally, and then transferred "as is" to any location on the network.

    Advantages and disadvantages


    Strong:
    • Simplicity, mobility, compactness of a code.
    • There is no binding to technologies and databases (the database system is the file system). At the core are only open specifications and standards.
    • Easy to create and maintain backups (simple copying).

    Weak:
    • Frondend loses backend in functionality. Complex functionality can be significantly more time consuming to develop.
    • JavaScript must be enabled in the browser.

    Links to the article


    REST architecture
    HTTP request types and REST philosophy
    XMLHTTPRequest: description, application, common problems
    XMLHttpRequest
    DOM basics : working with
    JavaScript HTML page HTML DOM Document
    BOM Location Object
    Window.location

    Also popular now: