0

There are plenty of examples of how to included content from one html file in another, including this:

Include another HTML file in a HTML file

Is it possible to include content from an other file in the HEAD of the calling html document?

If I try this:

Source

<html>

    <head>
        <div id="headerInclude"></div>
        <script src="/lforms-examples/lib/jquery-1.11.3/jquery.min.js"></script>
        <script>$("#headerInclude").load("/lforms-examples/pages/header-footer/ComponentHeader.html");</script>
    </head>

    <body>
        <h1>Basic Questionnaire Example Using Header</h1>
    </body>

</html>

Include

<html>
    <head>
        <link rel="shortcut icon" type="image/x-icon" href="/lforms-examples/img/nachc-favico.png">
    </head>
</html>

I get this:

Note the link is in the body and not the head and the favicon.ico is not found.
enter image description here

John
  • 3,458
  • 4
  • 33
  • 54
  • Include when? At server response time, or only after the client starts loading the page? Because the first is trivial: use any of many available templating engines, and the second is "stop and start doing the first instead". – Mike 'Pomax' Kamermans Jul 23 '22 at 15:11

1 Answers1

1

Use $.get from jQuery to add data to head tag. After inital page render.

$.get('./lforms-examples/pages/header-footer/ComponentHeader.html', function(data) {
    $('head').append(data);
});

Read more about favicon https://mathiasbynens.be/notes/rel-shortcut-icon

Mr. Sven
  • 78
  • 5