Peter Bissmire

18-07-19

Loading content with javaScript.

javaScript provides a functionality for inserting innerHTML in a DOM element. This can be used to load content as part of a page, triggered by the load event, which occurs once the rest of the page has loaded. The DOM element may well be empty and unsized at this point. If this is the case, the browser's rendering engine will have determined a layout based on zero size and inserting the content will have unforeseen consequences such as the failure of text wrapping. In some browsers, the content itself may be incorrectly rendered.

To avoid this problem, the DOM element must be provided with some kind of place-holder content, preferably similar in size to the innerHTML to be loaded.

In the case of interest here, the content of an element is periodically refreshed by javaScript. Unfortunately, this does not yield precisely the same result as loading it initially with a PHP include. The latter results in a leading blank line, which is absent in the javaScript load. <update, 18-07-20> This is a known issue with UTF-8 encoding, the preferred option for the Web, and is caused by failure to strip the (redundant) (byte order mark).

The solution adopted, taking the rendering problem into account, is to use the PHP include as a place-holder and follow this immediately with a javaScript overwrite on document load (instant refresh). The problem can also be solved by ensuring that the include file is "BOMless"; instant refresh, however, is maintained as a useful backstop.