How To Load Pages Inside DIV

Posted by on December 29, 2009 Leave a comment (0) Go to comments

Introduction:
In this article,we are going to discuss about,how to load pages inside div.

Main:

Just i used one iframe for achieve this,please check this below sample code,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>NetProgrammingHelp</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function Load_Inside(the_id,url,NetProgrammingHelp_Style)
{
var inserted=document.getElementById(the_id);
if(false)
{
inserted.innerHTML='<iframe src="' + url + '", style="'+ NetProgrammingHelp_Style +'"><\/iframe>'
}
else 
{while (inserted.firstChild)
{
inserted.removeChild(inserted.firstChild);
}
OBJ = document.createElement("object");
OBJ.setAttribute('type','text/html');
OBJ.setAttribute('data',url);
OBJ.setAttribute('style',NetProgrammingHelp_Style);
inserted.appendChild(OBJ);
}
}
</script>
<script type="text/javascript">
function hide(tag,className) {
var els = document.getElementsByTagName(tag)
      for (i=0;i<els.length; i++) {
              if (els.item(i).className == className){
              els.item(i).style.display="none";
              while (els.item(i).firstChild)
              els.item(i).removeChild(els.item(i).firstChild);
      }
     }
    }
 
function showNetProgrammingHelp( whichNetProgrammingHelp )
{
var elem, vis;
elem = document.getElementById( whichNetProgrammingHelp );
vis = elem.style;
vis.display='block';
}
</script>
</head>
<body>
<div>
<button onclick="hide('div','inserted')">Hide all</button><br>
<a href="javascript:void(0)" onclick= "showNetProgrammingHelp('NetProgrammingHelp2');Load_Inside('NetProgrammingHelp2', 'http://www.NetProgrammingHelp.com', 'position:absolute; width:200px;height:250px; left:10%; border:1px solid red; top:20%'); return false">NetProgrammingHelp.com</a> &nbsp;&nbsp;
<div id="NetProgrammingHelp2" class="inserted"></div>
</div>
</body>
</html>