Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Include html in another html file [duplicate]

I have a html "head" template and a navigation template that I want to include in all my other html files for my site. I found this post:

Include another HTML file in a HTML file

And my question is... what if it's the header that I want to include?

So for example, I have the following file structure:

 /var/www/includes/templates/header.html                              navigation.html 

header.html might look like this:

<!DOCTYPE html> <html lang="en"> <head>      <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1">     <meta name="description" content="">     <meta name="author" content="">      <title>Test Portal</title>   </head> 

In a case like this, can I still follow the example in the other post where they create a div and populate the div via jquery?

like image 593
Happydevdays Avatar asked Aug 08 '16 20:08

Happydevdays


People also ask

How do I display the content of one HTML page in another?

You could use an <iframe> in order to display an external webpage within your webpage. Just place the url of the webpage that you want to display inside the quotes of the src attribute. Show activity on this post. Either you use an iframe or you load the site via AJAX into a div (e.g. using jQuerys load() method).

How do I make a copy of an HTML file?

Copy the HTML: Press the CTRL+C shortcut to copy, or right-click on your selected text and click Copy.

Which of the following elements would you use to display another HTML document inside one HTML document?

Using HTML <iframe> tag.


Video Answer


1 Answers

Method 1:

I think it would be best way to include an html content/file into another html file using jQuery.

You can simply include the jQuery.js and load the HTML file using $("#DivContent").load("yourFile.html");

For example

<html>    <head>      <script src="jquery.js"></script>      <script>      $(function(){       $("#DivContent").load("another_file.html");      });     </script>    </head>     <body>       <div id="DivContent"></div>   </body>  </html> 

Method 2:

There are no such tags available to include the file but there are some third party methods available like this:

<!DOCTYPE html> <html> <script src="http://www.w3schools.com/lib/w3data.js"></script>  <body>  <div w3-include-html="content.html"></div>   <script> w3IncludeHTML(); </script>  </body> </html> 

Method 3:

Some people also used server-side-includes (SSI):

<!--#include virtual="a.html" -->  
like image 122
Punit Gajjar Avatar answered Sep 26 '22 00:09

Punit Gajjar