True client-side HTML includes

Question

HTML doesn't support client-side inclusion of other HTML, such as one gets for C with the #include directive. Instead, the dominant tools for client-side HTML inclusion appear to be iframe, object, and especially jQuery's .load. See this thread for examples.

Unfortunately, none of these methods seem to produce exactly the same DOM one would get from a #include. In particular, iframe and object wrap the included content in their respective tags. Also, the jQuery solution proposed in the example thread still results in a DOM with an extra div.

For example, consider the thread's jQuery solution:

a.html:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

b.html:

<p> This is my include file </p>

This will create a DOM where the body part looks like:

<body> 
  <div id="includedContent">
    <p> This is my include file </p>
  </div>
</body>

but a true #include would not include the wrapping div, so the DOM would look like:

<body> 
  <p> This is my include file </p>
</body>

Any idea how to do a client-side include without the wrapper tags?

EDIT: I don't want to assume knowledge of the surrounding tags. For example, in this case the surrounding tag is body, but it won't be in all cases.

Why not selecting the `body` element? `$("body").load("b.html");` — undefined, Sep 20 '13 at 03:55
HTML has supported client-side inclusion since early days; browser vendors just didn’t implement it, except when processing XHTML as genuine XHTML (i.e., as XML with HTML tags) – you can declare an entity and use an entity reference. But there’s a reason why browsers vendors didn’t bother: inclusion is best done server-side. — Jukka K. Korpela, Sep 20 '13 at 06:20

score 7 · Answer 1 · answered Jan 13 '14 at 16:49

7

Shameless plug of a library that I wrote the solve similar problem.

https://github.com/LexmarkWeb/csi.js

<div data-include="/path/to/include.html"></div>

The above will take the contents of /path/to/include.html and replace the div with it.

answered Jan 13 '14 at 16:49

Michael Marr

1,901
13
13

I'm way late on this post, and a noob to much of this: how would I insert the output of an HTML select form with a filepath into the data-include part of
? The object is to choose one of several HTML files for the include. – Dan Dec 20 '20 at 22:04

PSL · Accepted Answer · 2013-09-20T04:10:11.503

I assume that your body has other elements or other inclusion tags like these, in which case you can use the callback of load to unwrap itself once the load is completed.

 $(function(){
   $("#includedContent").load("b.html", function(){
        $(this).contents().unwrap();
   }); 
});

You can isolate this callback function and use it for any other load that you'd be performing across.

   function unWrapPlaceholder(){
     $(this).contents().unwrap();
   }


    $(function(){
       $("#includedContent").load("b.html", unWrapPlaceholder); 
       $("#headerContent").load("h.html", unWrapPlaceholder); 
       $("#footerContent").load("f.html", unWrapPlaceholder); 
    });

score 2 · Answer 3 · answered Jul 27 '18 at 07:39

2

WHATWG has a proposal and discussion on standardizing HTML includes which also includes links to quite a few js libraries https://github.com/whatwg/html/issues/2791

answered Jul 27 '18 at 07:39

Null

659
7
10

score 1 · Answer 4 · answered Sep 20 '13 at 03:57

In your example you've already defined the wrapper element in the DOM before you use jQuery to load the content.

<body> 
  <div id="includedContent"></div>
</body>

If you're using jQuery to .load() you specify where you want the content to go. There's no reason why you can't use

$("body").load("b.html");

Which will give you

<body> 
  <p> This is my include file </p>
</body>

score 1 · Answer 5 · answered Sep 20 '13 at 04:05

You may want to know how jQuery.load() works which is documented here.

Now, in jQuery when you select a object and call the load function, you want the that specific object to change.

like in your example

$("#includedContent").load("b.html");

you selected the div element with id includedContent to be transformed. And the code is specifically doing that. Load is made to load and not include. Since ajax needs to modify mostly parts of pages rather than whole page.

score 0 · Answer 6 · answered Jun 20 '14 at 23:05

Combining the ideas from the other answers:

$(function(){
    $("[data-include]").each(function(){
        var that = $(this);
        that.load(that.attr('data-include'), function(){
            that.contents().unwrap();
        }); 
    });
});

Now you can easily import with syntax similar to other languages, i.e.:

<div data-include="includes/topmenu.html"></div>

True client-side HTML includes

6 Answers6

Linked