How to include HTML page In other HTML page

Question

0.00/5 (No votes)

See more:

Hello All,

I want to include html page in other page
foe ex. home.html and footer.html
i want to include footer.html in home.html page.
and when run home.html and (ctrl+U) view source code both page code will be
want to show.

please help me.

Thanks In advance.

Regards,
Ravi Walde

Posted 10-Aug-15 23:37pm

Member 10271164

Add a Solution

Comments

Kornfeld Eliyahu Peter 11-Aug-15 5:43am

Plain HTML has no include feature...
What platform/server side do you use?

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

deepankarbhatnagar · Answer 1 · 2015-08-11T00:30:00

Solution 1

Please refer this link below for your answer as use can use

<div data-include="/path/to/include.html"></div>

http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file[^]

Posted 11-Aug-15 0:30am

deepankarbhatnagar

Comments

Member 10271164 11-Aug-15 7:07am

sir, data-include is not work.

deepankarbhatnagar 11-Aug-15 7:13am

try this where b.html is your another html file,

<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>

<body>
<div id="includedContent"></div>
</body>
</html>

Member 14933798 18-Nov-20 8:19am

$(function(){
debugger;
$("#includedContent").load("https://test.bondevalue.com/offers.html");
});

Hi Sir,
I tried this many time it is not working. the below error is showing
Access to XMLHttpRequest at 'https://test.bondevalue.com/offers.html' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

hypermellow 11-Aug-15 7:18am

As per the original comment to your question, there is no include functionality in plain/native HTML.

To get the above solution working, you'll need to use a suitable JavaScript library - which has been omitted from the above post.

https://github.com/LexmarkWeb/csi.js

Member 10271164 11-Aug-15 8:22am

Sir,
I have tried this thing also apply references of this file in a.html. but did not show all a and b source code in browser
<script src="js/csi.js" type="text/javascript"></script>
<script src="js/csi.min.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>

please help me.
thanks in advance.

Member 10271164 11-Aug-15 8:23am

My code is below
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<script src="js/csi.js" type="text/javascript"></script>
<script src="js/csi.min.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#includedContent").load("Test.htm");
});
</script>

</head>
<body>
<div id="includedContent"></div>

</body>

hypermellow · Answer 2 · 2015-08-11T03:48:00

Solution 2

Hi,

To get Solution 1 working you need to include the file csi.js, which you can locate here[^].

As per the example shown on GitHub, to use this library you must include the file csi.js in your page header, then you need to add the data-include attribute with its value set to the file you want to include, on the container element.

HTML

<html>
  <head>
    <script src="csi.js"></script>
  </head>
  <body>
    <div data-include="Test.htm"></div>
  </body>
</html>

... hope it helps.

Posted 11-Aug-15 3:48am

hypermellow

Comments

Member 10271164 12-Aug-15 1:23am

sir, not work.
it shows only home page source code not both see the sorce code:
when ctrl+U then this code will show.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<script src="js/csi.js" type="text/javascript"></script>
<script src="js/csi.min.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#includedContent").load("Test.htm");
});
</script>
<script type="text/javascript"></script>

</head>
<body>

<div data-include="Test.htm"></div>

</body>
</html>

I want both page code home page and test page source code in home page source code.

hypermellow 12-Aug-15 3:50am

Hi,
As previously stated, HTML does not have an include feature.

The solution I posted is a working example of a type of JavaScript include feature (the html part of this was posted in Solution 1), it will not alter the browsers source code.

To include content that alters the browser source code, you need to use a server side technology that offers that feature (php/asp/asp.net etc).

Oh ... the source code you posted above is not the markup contained in the solution I posted. If you try the markup I posted, the browser will render the child HTML page into the parent ... but this will not change the browser source code.

... hope it helps.

Member 14933798 18-Nov-20 8:19am

$(function(){
debugger;
$("#includedContent").load("https://test.bondevalue.com/offers.html");
});

Hi Sir,
I tried this many time it is not working. the below error is showing
Access to XMLHttpRequest at 'https://test.bondevalue.com/offers.html' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.