I’m not new to programming, but I am somewhat new to web development and I’m trying to figure out the most preferred way of taking a standalone header from one html document and adding it to other html documents without code duplication. If possible I want to do this with Javascript so I can learn with more basic tools before expanding further.
I’ve researched this a fair bit, but the advice is a bit confusing since it either seems out of date or possibly not the most secure way of handling things. Is there a preferred way of doing something like this?
After reading your responses to some other comments here, I might be able to offer some advice. I haven’t done professional web dev for a long time now, but I’ve kept my hand in a little with hobby projects.
First, you need to imagine a wall between the server and the client (browser). Unless you deliberately build a connection between the two, it won’t exist. A standard static webserver only sends flat files to the browser. Now, if I understand what you’re thinking, what you want to do is technically possible, but it’s kind of like getting milk from the corner store by moving the store’s fridge into your kitchen.
Usually what you’re talking about is done with dynamically served pages, using some kind of server-side scripting. The server-side script grabs all the pieces of your page from files, assembles them on the server, then sends the finished page to the user’s browser (on the other side of the “wall”) as a regular, static page. I haven’t used it myself, but I believe that Node.js allows us to use JavaScript as a server-side scripting language, but you still need to have it installed on your server (as with any server-side scripting language).
It should certainly be possible to achieve a similar end result by sending an initial page to the client, loaded with JavaScript that performs subsequent requests from the browser back to the server, and assembles the page on the client’s side, but doing your basic page construction this way would probably be considered by most as a really messy solution.
Here’s an article I found which may give you some tips for further research: https://css-tricks.com/the-simplest-ways-to-handle-html-includes/
If I absolutely had to do something like this with client-side JavaScript, I’d probably make .js file(s) with each section (i.e. header, footer, etc.) being handled by a single function that takes a CSS DIV id and fills it from static strings with insertAdjacentHTML() calls. This is nasty enough without trying to write a script that loads and parses other HTML pages from within the browser.
It’s easy enough to include extra .js files in an HTML file; you just need to make sure that the included files have loaded before you start trying to alter your page in the browser. Keep in mind that those “included” .js files are actually going to be fetched by the user’s browser in a separate HTTP exchange, after the inital page request.
That makes sense. Thanks for the well thought out explanations. I am finding that I need to adjust my assumptions about how things work on the webdev side since it seems to work a bit differently than I expected. I’m still trying to feel out what I should and shouldn’t be using for particular tasks, so posts like these are helpful.