Load a page in HTML DIv tag

How to load another page in HTML DIV tag

The homepage of this site, can be accessible by using the following technique from here

Using Iframe, it is quite easy to load another page in your current page. However, if you want to load another page in a <div> tag, how can you do that. There are javascript library such as JQuery, prototype, using these you can do that using few lines of code. But, if you want to make it by yourslef, then you can do it in the following way. Here is the code which by itself self explanatory.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="loadhtmlindiv.aspx.cs" Inherits="myworks_loadhtmlindiv" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Load html part of an external web</title>
    <style type="text/css">
        body
        {
            background-color: #eeeeee;
        }
        #container
        {
            width: 760px;
            margin: 0 auto;
            padding: 10px;
            background-color: #ffffff;
        }
        #output
        {
            border: 3px solid #eeeeee;
            padding: 10px 0 10px 10px;
            text-align: center;
        }
    </style>

    <script type="text/javascript">
    function htmlinDiv(objframe,objDiv,refUrl){
        var aFrame=document.createElement("iframe");
        aFrame.id=objframe;
        aFrame.setAttribute("src",refUrl);
        aFrame.style.display="none";
        //aFrame.style.visibility="hidden";
        document.body.appendChild(aFrame);
        
        if(aFrame.attachEvent){
        aFrame.attachEvent("onload",function(evt){
        abc(objframe);});        
        }else{
        aFrame.addEventListener("load",function(){
        abc(objframe);}, false);
        }
    }
    function abc(obj){
        var remoteHtm=document.getElementById(obj).contentWindow.document.body.innerHTML;
        //remoteHtm= remoteHtm.replace(/<[^<]+?>/i,"");
        remoteHtm= remoteHtm.replace(/<form[^<]+?>/i,"<formdisabled>");
        document.getElementById("myDiv").innerHTML=remoteHtm;
    }
    
    </script>

</head>
<body onload="htmlinDiv('iframe1','myDiv','../../default.aspx');">
    <div id="container">
        <form id="form1" runat="server">
        <div id='output"'>
            <div id="Div1">
            </div>
        </div>
        </form>
    </div>
</body>
</html>

The page by itself loaded with this kind of logic. The page link is http://nazmulweb.com

No  Responses to "Load a page in HTML DIv tag"

Leave a Reply