Simulating head HTML import

Question

I have a couple of .html files and I want to have the same header for all of them. As of now I can do this on Chrome by using html imports:

I have one page called CommonHead.html that has some JS and CSS files like:

<!-- CommonHead.html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

And then I have a bunch of other html pages where I put this on the header:

<head>
  <link rel="import" href="CommonHead.html">
</head>

That's working perfectly. However, Firefox doesn't support this so I want a way to do the same thing using JavaScript. I tried .load, using .get into a variable appending the stuff to the header, etc. Nothing seems to work reliably.

Does anyone know what's the proper way to do this using javascript/jquery?

I think the most reliable method is to set your project up on a server and use a server-sided language to import your files. But I'm curious to see what others come up with. — Quangdao Nguyen, Oct 25 '16 at 15:22
@QuangdaoNguyen I agree. Of course in the past I've done php includes, masterpages in webforms, layouts in MVC, etc. However, I'm working on a project that's simple enough that shouldn't need serverside code but I still don't want to repeat the same header everywhere ;) — Gaspa79, Oct 25 '16 at 15:23
A build process, SSI (server side includes), simple include with php, ajax request and dom manipulation, ... options are many — Kris, Oct 25 '16 at 15:28

score 0 · Answer 1 · edited May 23 '17 at 12:33

Firefox current stance on HTML Imports can be found here:

As previously stated, Mozilla is not currently intending to implementing HTML Imports. This is in part because we’d like to see how ES6 modules pan out before shipping another way of importing external assets, and partly because we don’t feel they enable much that isn’t already possible.

We’ve been working with Web Components in Firefox OS for over a year and have found using existing module syntax (AMD or Common JS) to resolve a dependency tree, registering elements, loaded using a normal tag seems to be enough to get stuff done.

HTML Imports do lend themselves well to a simpler/more declarative workflow, such as the older and Polymer’s current registration syntax.

With this simplicity has come criticism from the community that Imports don’t offer enough control to be taken seriously as a dependency management solution.

Ideally, you should be using some type of server side code like PHP to include the dependencies, and output them onto each HTML page you're rendering.

Example index.php:

<html>
    <head>
        <title>Testing</title>
        <?php include('includes/header.php'); ?>
    </head>
</html>

Alternatively, you can also look into HTML Imports polyfill, which can be found here. This will allow you to use HTML Imports on IE11+, Firefox, Chrome, Safari 7+, and Mobile Devices. Note, that non supported devices (Like ie 10 and below, wont be able to benefit from this). I strongly recommend the use of a server side language, to avoid compatibility with older clients.

Some other possibilities:

Simulating head HTML import

1 Answers1