CODEWITHSUNDEEP
phphtmlfileheaderinclude
J Ramesh Fernandez
J Ramesh Fernandez

Reputation: 309

How to include html files like include in php?

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

<?php include "nav.php";?>

Upvotes: 6

Views: 4763

Answers (6)

Min Somai
Min Somai

Reputation: 618

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>

Upvotes: 0

display-name-is-missing
display-name-is-missing

Reputation: 4399

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.

Upvotes: 3

Web Developer
Web Developer

Reputation: 51

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" -->

Upvotes: 0

Paul Alexander Burkart
Paul Alexander Burkart

Reputation: 494

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>

Upvotes: 2

Padmanathan J
Padmanathan J

Reputation: 4620

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>

Upvotes: 1

Ignacio Ocampo
Ignacio Ocampo

Reputation: 2713

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

<div id="moreData"></div>
$( "#moreData" ).load( "otherPage.html" );

Upvotes: 2

Related Questions