0

I like to replicate header/footer content using require_once at the top of my document like so: <?php require_once( "SNIPPETS/HEADER.php" ); ?> Where the snippet header.php has everything from my <!DOCTYPE> and opening <html> to my page header in the <body> (navigation, logo, etc.) And I do similar for the footer. It is immensely helpful with updating multipage sites. I am working on a project for a small company that uses a sales/web platform that is fairly restrictive and does not support PHP, or any server-side scripting. The thing is the website is actually going to be fairly complex and may need revisions, so I want to use this methodology if at all possible.

I am stuck with HTML/CSS/JS. Is there any function or workaround that I can use to do this?

I was thinking I might be able to have an externally hosted snippet db file (xml or json) that I can call and read with js, and then do an innerHTML or outerHTML replacement of the <head></head>, <div class='header'></div>, and <footer></footer> tags.

But that seems maybe a tad inelegant, so I was wondering if anyone else had a similar problem with a better solution?

James
  • 11
  • 2
  • 5
    I would advice against writing a fairly complex project only client side. How do you secure/share the data? – KIKO Software Feb 08 '23 at 09:19
  • 1
    You can use a front-end framework like React JS and make use of components for this. It would be a single page application and this would automatically solve your issue of header and footer to be included at every page. Also, have a look at https://stackoverflow.com/questions/5168451/javascript-require-on-client-side – nice_dev Feb 08 '23 at 09:24
  • 1
    Sounds like a use case for a _static site generator_. You'd run that on your own machine to create the HTML documents, and then you simply upload them to the server afterwards. – CBroe Feb 08 '23 at 09:26
  • @KIKOSoftware I am just looking to pull standard header content like a navigation bar, and footer content like link formatting in. As I currently see it there should be no data I am importing that would pose a security risk. All of the secure components are controlled server side by the industry-specific CMS that I have to build this website in. I am just trying to pull in things that would be visible client-side regardless of the application. – James Feb 24 '23 at 06:36
  • @nice_dev Thanks for the suggestion! I haven't used react.js yet, but I will look into it more. I generally try to build stuff from vanilla js as much as possible, but this might work out if I don't have luck getting that to work. – James Feb 24 '23 at 06:39
  • @CBroe I don't think that would work for me. I actually don't have access to the server for this site, it is housed in an industry specific CMS that I have to use for the company that is contracting me. The sites are not static, there is actually a lot of server side components, I just can't change them because I don't have access to that through the CMS, but my client wants features / layouts that are unique and unavailable within that system. I need a dynamic method to import the header and footer content from an external source to multiple pages that I don't have direct server access to. – James Feb 24 '23 at 06:43

1 Answers1

0

Going strictly by your title, you can emulate a require_once() in Javascript. I'm using JQuery, and my function looks something like this:

var loadedScriptUrls = [];

function loadJavascriptOnce(url)
{
  // do it only when not loaded before
  if (loadedScriptUrls.indexOf(url) < 0) {
    $.getScript(url)
     .done(function (script, textStatus) {
       // remember the loaded script
       loadedScriptUrls.push(url);
     })
     .fail(function(jqXHR, textStatus, error) {
       alert("loadJavascriptOnce(): Script [" + url + "] error: " + error);
     });
  }
}

Any script can be loaded like this:

loadJavascriptOnce("https://js/my_script.js");

Remember to always use the same type of URL, for instance always the full URL.

Note that this is all written in Javascript.

KIKO Software
  • 15,283
  • 3
  • 18
  • 33
  • Thank you, I haven't quite gotten it fully implemented but this should work for my purposes! – James Feb 24 '23 at 06:32