-1

I have an header.html file which I want to include in all my HTML files, how I could do it?

My header.html code:

<html>
    <header id="header" class="header">
        <--code-->
    </header>
</html>

In my html I have tried:

<body>
    <!--#include file="layout/header.html" -->
</body>

And also using js:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script>
        $(function () {
            $("#header").load("layout/header.html");
        });
    </script>
</head>
<body>
    <div id="header"></div>
</body>

I tried this: Include another HTML file in a HTML file

But it does not work for me, header's content does not show. What can be the problem? I tried main.html inside XAMPP and also out it. What I explained before work in Firefox, but not in Chrome, why? When I publish the web, header.html will not load in Chrome browser?

Chrome console error: jquery.min.js:2 Access to XMLHttpRequest at 'file:///C:/.../header.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Kirito
  • 165
  • 2
  • 9
  • Andreas, I tried it and it does not work... I do not understand why this does not work for me – Kirito Jun 04 '19 at 08:22
  • `` is only going to work if your server is configured for server-side includes – Quentin Jun 04 '19 at 08:44
  • I can think of a reason why `$("#header").load("layout/header.html");` would fail … but it would have an obvious error message on the Browser's Console and you said nothing about any errors there. – Quentin Jun 04 '19 at 08:45
  • Sorry, what I explained before work in Firefox, but not in Chrome, why? When I publish the web, header.html will not load in Chrome browser? Chrome console error: jquery.min.js:2 Access to XMLHttpRequest at 'file:///C:/.../header.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. – Kirito Jun 04 '19 at 08:57
  • This should have been part of the question (and not only a comment) from the beginning... Just search _"chrome file:/// cors"_ – Andreas Jun 04 '19 at 11:03

1 Answers1

-2

You could have your server side code manually parse both the header and main html files and stitch them together into a valid full composed html document. It would be like your own custom templating engine!

awhoof
  • 1
  • 1
  • I use simple PHP include() for this, but it’s I guess more trendy to use static page generators – eckes Jun 04 '19 at 10:48
  • Sure, php does it in memory (but that’s not necessarily faster than doing it statically) – eckes Jun 04 '19 at 10:51