CODEWITHSUNDEEP
javascripthtmljquery
John
John

Reputation: 3996

Include another HTML file in a HTML file in the HEAD section of the document

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

Upvotes: 0

Views: 186

Answers (1)

Mr. Sven
Mr. Sven

Reputation: 78

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

Upvotes: 1

Related Questions