What's the lightest way to add the smallest amount of dynamics to a static HTML site?-CodePudding

I have a personal website that's all static html.

It works perfectly for my needs, except for one tiny thing.

I want to dynamically change a single word on a single page: the name of the current map for a game server I'm running.

I can easily run a cron job to dump the name of the map into a file in the site's html directory, call it mapname.txt. This file contains a single line of text, the name of the map.

How would I update, say, game.html to include this map name?

I would very strongly prefer to not pull in some massive framework, or something like php or javascript to accomplish this.

I want the lightest weight solution possible. Using sed is an option, although definitely a hacky one. What's the tiniest step up from static html?

CodePudding user response：

If you say "dynamically", do you mean:

If the information changes ...

A) the user should see it after they have re-loaded the page?
B) the page should update without the need to reload?

For A, you can use PHP (or any other language your server supports) to read the data from the file and print it into the web page. This will happen on server side.

For B, you can use JS that queries the file and updates the HTML. This will happen on client side.

CodePudding user response：

To change text there are a few way though only two appropriate methods.

First is using textContent:

document.getElementById('example').textContent = 'some example text';

Secondly is the older nodeValue however it's a bit more tricky since you have to specify the exact textNode (e.g. .firstChild):

document.getElementById('example').firstChild.nodevalue = 'some example text';

You're 100% on the mark about not using frameworks or libraries, almost everything exists without the suck.

I'm not going to test this though this is a very stripped down version of my ajax function from my web platform. Some people might scream about the Fetch API however the syntax is an absolute mess. I recommend figuring out how to standardize this function so you can use it for everything instead of making copies of the code for every instance. Mine supports both GET and POST requests.

function ajax(method, url, param_id_container_pos, id_container)
{
 var xhr = new XMLHttpRequest();
 xhr.withCredentials = true;
 xhr.timeout = 8000;
 xhr.open(method,url,true);
 xhr.send(null);
 xhr.onreadystatechange = function()
 {
  if (xhr.readyState == 4)
  {

   if (xhr.getResponseHeader('content-type'))
   {
    var type = xhr.getResponseHeader('content-type').split('/')[1];
    if (type.indexOf(';') >- 1) {type = type.split(';')[0];}
   }
   else {var type = 'xml';}//Best guess for now.

   console.log(type,xhr);
   console.log(xhr.responseText);
   //console.log(type,xhr.responseXML);
   //document.getElementById('example').textContent = xhr.responseText;
  }
 }
}

You're also going to have to ensure that the url is set to an absolute path. I use path variable in my platform (see my profile for the link, wildly clean and organized code).

There are plenty of ways to make this function reusable and I highly recommend doing that. For now use the last non-curley-bracket line to update your line of text.