Geek Answers Handbook

Include html in another html file

I have an 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 the HTML file

And my question is: what if this is the title 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 that case, can I continue to follow the example in another post where they create a div and populate the div through jquery?

+16
javascript jquery html include
source share
5 answers

Method 1:

I think this would be the best way to include the html content / file in another html file using jQuery.

You can simply enable 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 tags available to include the file, but there are some third-party methods, such as:

 <!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 have also used server inclusions (SSI):

 <!--#include virtual="a.html" -->
+25
source share

I needed to include many files. So I created the following script:

 <script> $(function(){ $('[id$="-include"]').each(function (e){ $(this).load("includes\\" + $(this).attr("id").replace("-include", "") + ".html"); }); }); </script>

Use a div, for example, to place a placeholder for insertion.

 <div id="example-include"></div>

The created folder "includes" for all the files that I need to include. Created the file "example.html". It works with any number of inclusions. You just need to use the naming convention and put all the included files in the correct folder.

+4
source share

Using an HTML tag.

I had a similar problem, then I used

<iframe src = "b.html" height = "80px" width = "500px">

+1
source share

Use the <object> :

 <object data="filename.html"></object>
0
source share

Use php include

to save the head as head.php and in every file that you want to add to the head

 <?php include 'path/to/file/head.php';?>

you can do the same with navigation and even the footer, so you only need to change it in one place if you ever need to edit it.

therefore, your presentation document will look something like this.

 <?php include 'head.php';?> <body> <?php include 'navigation.php';?> <!-- page content --> <?php include 'footer.php';?> </body>

Remember to save your files as php files, not html.

-one
source share

More articles:


All Articles