How to use external html file in current html code

Question

I am trying to load an external HTML page (common navigation) into my current HTML page. I tried the load function but it is deprecated. Can you tell me another way to include it? I am not using any server.

Here's my code

<!DOCTYPE html>
<html>

<head>
  <script src="ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#content').load(" nav.html ");
    });
  </script>
</head>

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

</html>

jQuery ajax load() is not deprecated. https://api.jquery.com/load/ — charlietfl, Sep 06 '18 at 11:48
your question is answered in this question: http://stackoverflow.com/questions/8401113/html5-include-file. — Mounir Tanbouzeh El Husseini, Sep 06 '18 at 11:51
*"not using a server"* . Will need to in order to do what you are asking — charlietfl, Sep 06 '18 at 11:52
Possible duplicate of [Include another HTML file in a HTML file](https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file) — u-ways, Sep 06 '18 at 11:54
try using the get method and then replace $("html").html(response); — Noel Schenk, Sep 06 '18 at 12:33

score 1 · Answer 1 · edited Feb 02 '20 at 12:46

1

Try this

<script>
    function loadPage(href) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", href, false);
        xmlhttp.send();
        return xmlhttp.responseText;
    };

    document.getElementById('content').innerHTML =
        loadPage('your_html_file.html');
</script>


<div id="content">

</div>

edited Feb 02 '20 at 12:46

ankitkanojia

3,072
4
22
35

answered Sep 06 '18 at 12:19

Vaibhav Shettar

790
2
9
20

Simon Jensen · Answer 2 · 2018-09-06T18:57:32.730

You should use the SSI-function.

There is several ways but this can solve your problem.

<!--#include virtual="PathToYourFile/YourFile.html" -->

This can be inserted into a <div> for further styling in CSS.

REMEMBER! Due to some limitations in html-doctypes you cannot inlude a .html-file into an .html-file. You have to use another format as .shtml where you can inlude your .html-files. You can include .html into your .shtmlfile. This was also what .shtml was originally created for. This is because it is part of the XHTML (Dynamic XML HTML)...

To change a file

Your approach on the HTML is correct and also your JS. I include a lot of html-files containing texts there.

My approach is that when a page is loaded some text will be loaded with the  inside a <div>. Below JS is used to change the content in the <div>. As Daniel Beck stated below: "...at least in Apache the server needs to be configured to check particular file extensions...". You configure your file in your .htaccess-file. But ONLY do this if you know what you are doing.

Some (newer?) servers have a default setup of which you don't need to alter the .htaccess-file if you want to be able to include .html-files. At least you are able to include .html-files into .shtml-files.

I have included a Mimetype converter which tells the browser how it should read the file. For txt/html I have told the script that it should use the character encoding ISO-8859-1. Others as UTF-8 could also be used. This depends on your and your receivers native language.

Take into consideration to use the e.preventDefault();. With this i tells the browser NOT to see this as navigation link and will therefore only load the content in the <div>.

$(function() {
  $('#ButtonsID').click(function(e) {
    $('.DivClass').load('PathToFile/File.shtml');
    e.preventDefault();
  });

});

$.ajaxSetup({
  'beforeSend': function(xhr) {
    xhr.overrideMimeType('text/html; charset=ISO-8859-1');
  }
});

Might be worth pointing out that SSI and the javascript are separate (and conflicting) methods to accomplish the same thing -- as written here it looks like they're meant to be used together, which isn't the case. — Daniel Beck, Sep 06 '18 at 12:56
(Also I'm pretty sure the file extension / doctype stuff described here is [backwards](http://httpd.apache.org/docs/2.4/howto/ssi.html): at least in Apache the server needs to be configured to check particular file extensions -- traditionally .shtml -- for include directives; you'd include .html in a .shtml, not the other way around. (This is why you're needing to override your mimetypes on the client, because you don't have that configured correctly on the server side.) — Daniel Beck, Sep 06 '18 at 13:05

score 0 · Answer 3 · answered Sep 06 '18 at 12:14

0

Take both file pages in same directory then you can use simple button on link to use external file. for example

<button><a href="nav.html"> External file </a></button>

Button is your choice it's just example for understanding you can simple use html link.

answered Sep 06 '18 at 12:14

Hasnain Saqib

1
3

Thanks for contributing, but this doesn't really answer the question, which was about how to include external html in a page, not how to link to it. It's also best not to include extraneous elements in your code, such as your button tag, which has nothing to do with the link, and in fact is invalid as used here: [buttons can contain phrasing content, not interactive content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button).) – Daniel Beck Sep 06 '18 at 13:09

How to use external html file in current html code

3 Answers3