include html page-code into another [html]-file

Question

Ok, here is what I want to do:

include a header and a footer from external html file to another html file.

I know, there are lots of available snippets here. But...

...problems: I can't modify those external html and they contains a full <head> with meta, links and all.

here are code-snippets i have found (from @amir-saniyan - github ):

(function ($) {
  $.include = function (url) {
    $.ajax({
      url: url,
      async: false,
      success: function (result) {
        document.write(result);
      }
    });
  };
}(jQuery));
$.include("_header.html");
$.include("_footer.html");

and

$crop_start = (result.indexOf('<body>') !== -1) ? result.indexOf('<body>') + 7 : 0;
$crop_end = (result.indexOf('</body>') !== -1) ? result.indexOf('</body>') : result.length;
result = result.substring($crop_start, $crop_end);

How to merge the two html-code structures for having the expected result:

import that external html into another one, but without head ( only the html-code between the <body></body> tags )

jondinham · Accepted Answer · 2014-09-03 04:42:02Z

1

Add a 'div' directly under the 'body' tag in '_header.html' and '_footer.html' to hold all the HTML contents (because jQuery will strip off 'head' tag and 'body' tag when parsing a HTML string):

<body>
    <div id="wrapper">
    ...
    </div>
</body>

Then, replace your manual extraction of the html content

$crop_start = (result.indexOf('<body>') !== -1) ? result.indexOf('<body>') + 7 : 0;
$crop_end = (result.indexOf('</body>') !== -1) ? result.indexOf('</body>'):result.length;
result = result.substring($crop_start, $crop_end);

by

result = $(result).filter("#wrapper").html();

Apply the solution above to your 'include' function by changing:

document.write(result);

to

result = $(result).filter("#wrapper").html();
$("body").append(result);

Note: Remember that 'async' in $.ajax call must be 'false' in order for your header & footer be loaded at the correct position.

edited Sep 3, 2014 at 4:42

answered Sep 3, 2014 at 1:56

jondinham

8,53719 gold badges87 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nicolas Genty Over a year ago

Thanks, that's a good idea. Now, how can i use it with the first snippet ?

jondinham Over a year ago

added description to use with the first snippet

vernonner3voltazim · Accepted Answer · 2014-09-03 02:01:22Z

0

You may need to be more precise in what you are asking for, because you didn't define "header" and "footer". In the jQuery code snippet you presented, that snippet should be part of a larger HTML file that includes such things as a "< head >" tag (one definition of "header"). It is also something of a destructive snippet, since the document.write() function tends to cause just about everything on an already-loaded HTML page to be replaced (including the JavaScript!).

Consider replacing the call to the document.write() function with something like this (haven't tested this for typos):

 var txt;   //declare this variable somewhere,
            // not necessarily in the code-snippet function

 txt = document.createElement("p"); //paragraph tag
 txt.innerHTML = result;
 document.body.appendChild(txt);

This code assumes your HTML page already has a < body >< /body > tag-pair, possibly with nothing between them.

answered Sep 3, 2014 at 2:01

vernonner3voltazim

7866 silver badges5 bronze badges

3 Comments

Nicolas Genty Over a year ago

Hi, thanks for your answer. I know that i don't define anything in my first snippet. It just import page into mine and that's what i want... without anything else than the code between the body tags. That's what the second snippet is supposed to do.. but i don't know how to use it.

vernonner3voltazim Over a year ago

It looks to me like that second snippet merely trims a long string of HTML text, to remove everything before/including the opening body tag, and everything after/including the closing body tag. If that string is what you want to insert into the page that loaded/trimmed it, then the code I wrote regarding createElement and appendChild should do the trick --just do it in another function, different from the one in your first snippet that contains document.write().

Nicolas Genty Over a year ago

Thank you vernonner3voltazim! This second snippets was just too complicated.

Collectives™ on Stack Overflow

include html page-code into another [html]-file

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related