Archive for HTML

Include File in HTML

Wednesday, February 25th, 2009

Dynamic web pages allow you to include static or dynamic web pages through web programming. These web programming can be PHP, JSP, ASP or Perl which having a function include.

We are talking about HTML pages, to include another HTML pages. HTML does not have any function or method to include any other HTML pages. HTML can include HTML pages through iFrame or Frame. HTML can also include javascript file (js) and style sheet (CSS) extension file.

We have to make logic and take the help of JavaScript and Ajax or jQuery to include another HTML file in HTML file.

Ajax (send) function can call a file and get the content in response object. This response object can be easily added in HTML page through innerHTML.

xmlHttp.open("GET",header.html,true)
xmlHttp.send(null)

jQuery has a function (load) and get the innerHTML value in ID of any HTML tag of HTML page.

$("#header").load("header.html");

Demo

main.html

<html>
<head>
<title>including HTML file in HTML file</title>
<script>
var xmlHttp

function loadContent()
{
   xmlHttp=GetXmlHttpObject()
    if (xmlHttp==null)
    {
     alert ("Browser does not support HTTP Request")
     return
    }
    var url="header.html"

    xmlHttp.onreadystatechange=getData;
    xmlHttp.open("GET",url,true)
    xmlHttp.send(null)

    return
}

function getData()
{
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
    {
      document.getElementById("header").innerHTML=xmlHttp.responseText
    }
}

function GetXmlHttpObject()
{
  var objXMLHttp=null
    if (window.XMLHttpRequest)
    {
      objXMLHttp=new XMLHttpRequest()
    }
    else if (window.ActiveXObject)
    {
      objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
    }
  return objXMLHttp
}
</script>
</head>

<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td id="header">&nbsp;</td>
  </tr>
  <tr>
    <td>This is example of including file in HTML page</td>
  </tr>
</table>
<script>
loadContent() // this will call function loadContent when page is loading
</script>
</body>
</html>

header.html

<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>Home</td>
    <td>Profile</td>
    <td>Contact</td>
  </tr>
</table>

mainjQuery.html

<html>
<head>
<title>including HTML file in HTML file</title>
<script src="jquery.js"></script>
<script>
var xmlHttp

function loadContent()
{
   $("#header").load("header.html");
}
</script>
</head>

<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td id="header">&nbsp;</td>
  </tr>
  <tr>
    <td>This is example of including file in HTML page</td>
  </tr>
</table>
<script>
loadContent() // this will call function loadContent when page is loading
</script>
</body>
</html>

header.html

<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>Home</td>
    <td>Profile</td>
    <td>Contact</td>
  </tr>
</table>

Both of these allow us to include content in our HTML page. This is done by without using any PHP, JSP or any web programming.

Posted in HTML | No Comments »

« First...«3456789