CODEWITHSUNDEEP
javascriptjqueryhtml
Code lover
Code lover

Reputation: 93

How to use external html file in current html code

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>

Upvotes: 0

Views: 6329

Answers (3)

Vaibhav Shettar
Vaibhav Shettar

Reputation: 810

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>

Upvotes: 1

Simon Jensen
Simon Jensen

Reputation: 309

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 <!--#include virtual="" --> 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');
  }
});

Upvotes: 0

Hasnain Saqib
Hasnain Saqib

Reputation: 1

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.

Upvotes: 0

Related Questions