Website based on a single HTML page

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

Now is an interesting time, when some new technologies are rapidly changing by 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 there are tasks for which, speaking in figurative language, it is better to use not a new chainsaw, but a nail file in an old penknife.

Image - Website based on a single HTML page

Image - Website based on a single HTML page

The article shows the technique of website development, 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, according to the developer, can be any number, but to achieve full functionality, one will be enough. In the HTML page, links to content files are described as plain HTML links, according to the REST rules. Due to the location of links in one place, referential integrity is achieved.

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

First, the HTML page is loaded. Then the content file is determined and loaded. The name of the content file is written in the URL of the HTML link and is determined according to the REST rules. Uploading a content file via XHR.

There are no restrictions. Design, code, variable names and other developer agreements are typical for similar 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 should provide for the functionality for their processing.

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 “id” parameter specifies 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); }

 <body onload='onPageLoad()'>

The HTML link is composed so that the HTML page refers to itself, but with different values of the “id” parameter:

 <a href='site-1-page.htm?id=/it/it-box.txt'> </a>

To add new content, simply 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 a 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 informational site. Interactivity, if necessary, can be added based on web services. If you use more than one HTML page, you can, for example, develop one menu for all pages, which will be loaded on the same principle as the content. This will make it easier to maintain referential integrity, but the extra XHR request will be paid for.

How to insert an HTML page instead of a content file

To insert another HTML page into a basic HTML page, the easiest way is to use an iframe HTML tag. In this case, XHR is not needed. Add another parameter to the URL, for example “iframe”, and process it when loading the base 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 = "<iframe src='" + paramId + "'></iframe>"; }

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

When the HTML page is not at the root

Sometimes you need to develop not the whole site, but, for example, a thematic section. To keep HTML links up to date, you need to 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 = "<iframe src='" + paramId + "' width='100%' height='400'></iframe>"; } if(paramIframe == 2) { document.getElementById("div_body").innerHTML = "<iframe src='" + paramId + "' width='100%' height='400'></iframe>"; } } }

 <body onload='onPageLoad("/stencil-html-site-on-one-page")'>

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

Ready template

If you have any questions, you can view the demo site (GitHub) and download the site template (GitHub) . Demo and template are ready-made layout and filled with innocuous content.

Development can be conducted on any static HTTP server installed locally, and then transferred “as is” to any place on the network.

Advantages and disadvantages

Strong:

Simplicity, mobility, compact code.
There is no binding to technologies and databases (the role of the database is performed by the file system). At the core - only open specifications and standards.
Just create and maintain backups (simple copy).

Weak:

Frondend loses Backend in functionality. Complex functionality can be significantly more time consuming to develop.
JavaScript must be enabled in the browser.

Source: https://habr.com/ru/post/258931/

All Articles