6

How can we include files inside html, like how we usually include files in Php.

<?php include "nav.php";?>
J Ramesh Fernandez
  • 309
  • 1
  • 8
  • 22

6 Answers6

3

You can use jQuery:

HTML

<div id="container"></div>

jQuery

$("#container").load('somepage.html');

Learn more about the load function and what more you can do with it in the documentation.

display-name-is-missing
  • 4,424
  • 5
  • 28
  • 41
2

You can use Ajax, see JQuery load function, example:

<div id="moreData"></div>
$( "#moreData" ).load( "otherPage.html" );
Ignacio Ocampo
  • 2,693
  • 1
  • 20
  • 31
2

My suggestion would be to use jQuery.

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

 <body> 
  <div id="includeCont"></div>
 </body> 
</html>
Paul Alexander Burkart
  • 482
  • 2
  • 5
  • 20
1

Use ifrmae

<!DOCTYPE html>
<html>
<body>

<iframe src="http://www.w3schools.com">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

Or use Frameset

<!DOCTYPE html>
<html>

<frameset cols="25%,*,25%">
  <frame src="http://www.w3schools.com/frame_a.php">
  <frame src="http://www.w3schools.com/frame_b.php">
  <frame src="http://www.w3schools.com/frame_c.php">
</frameset>

</html>
Padmanathan J
  • 4,614
  • 5
  • 37
  • 75
0

There is a round about method using http://httpd.apache.org/docs/current/howto/ssi.html

Server Side includes

E.g <!--#include virtual="/footer.html" -->

Web Developer
  • 51
  • 3
  • 1
    Clever solution, though this maybe won't work on shared hosting. – display-name-is-missing Dec 19 '13 at 04:55
  • Yes correct. The server needs to be configured first to accept SSI. – Web Developer Dec 19 '13 at 04:56
  • Side note: The file needs to have the `.shtml` extension in order for this to work. This needs to be pointed out in your answer, and not just a link for someone to visit. – Funk Forty Niner Dec 19 '13 at 05:02
  • @Fred -ii Regarding the Side note. I guess you should not write wrong information here. Please read the link Carefully. Any type of file can be configured to use SSI. Not only .shtml. `AddType text/html .shtml AddOutputFilter INCLUDES .shtml` – Web Developer Dec 19 '13 at 05:07
  • Yeah I know that, and I was going to mention that before you commented, but what's the point in doing that, when the OP can just as well treat html as PHP? ;-) – Funk Forty Niner Dec 19 '13 at 05:09
  • Plus, `.shtml` files don't have as much functionality as PHP files, so it's better to treat html as PHP, instead of SSI. – Funk Forty Niner Dec 19 '13 at 05:10
0

It's possible with webpack and html-webpack-plugin. This is index.html. You can create multiple files.

like this.

<%= require('html-loader!./views/partial/nav.html') %>

and here's more.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Your Site Title</title>
  </head>

  <body>

    <%= require('html-loader!./views/partial/nav.html') %>

    <main id="mainDiv">
      <!-- Section Banner -->
      <%= require('html-loader!./views/partial/index/section-banner.html') %>

      <!-- Section Services -->
      <%= require('html-loader!./views/partial/index/section-services.html') %>

      <!-- Section About us -->
      <%= require('html-loader!./views/partial/index/section-aboutus.html') %>

      <!-- Section Call To Action -->
      <%= require('html-loader!./views/partial/index/section-call-to-action.html') %>

      <!-- Section Footer -->
      <%= require('html-loader!./views/partial/footer.html') %>
    </main>
  </body>
</html>
Min Somai
  • 567
  • 6
  • 13