views:

62

answers:

2

Hello, I am developing a web application with ASP.NET 3.5 with C# and Telerik Ajax Control. I have a iFrame in my master page. Application load other pages in iFrame dynamically and iFrame height adjust the dynamically when page load. I uses RadScriptManager , RadAjaxPannel, RadAjaxLoadingPannel in my page. The problem is when ajax "call back" the page, iFrame height not adjust dynamically.

<%@ Page Language="C#" AutoEventWireup="true"  CodeBehind="MastetPage.master.cs" Inherits="MastetPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head id="Head" runat="server">
    <title></title>

   <script type="text/javascript" language="JavaScript">


       function setSize(elem) {
           var the_height;

           the_height = elem.contentWindow.document.body.scrollHeight;
           elem.height = the_height; // Its works fine in IE, Chrome, Safari but not work in FF and opera


       }



</script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

</head>
<body  id="Page_Master"  runat="server"  >

    <form id="formMasterPage" method="post" runat="server">

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"  AsyncPostBackTimeout="500">
    </telerik:RadScriptManager>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="100%" Width="100%"   >


    <div id="MainPage">

        <div class="Header">

        </div>

        <div id="ContentHolder">
            <div id="Content">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>

                <iframe id="IFrameMaster" name="IFrameMaster"  scrolling="auto" width="998px"  style=" min-height:500px;"  allowtransparency="true"   frameborder="0" runat="server" >
                </iframe> 



            </div>
        </div>
        <div id="Footer">

        </div>
    </div>
     </telerik:RadAjaxPanel>


    </form>

</body>
</html>

Server side Code is:

// This code used in Page_Load Method and other methods depends on condition.
IFrameMaster.Attributes["src"] = "UIHome.aspx";
// This line used only Page_Load Method
IFrameMaster.Attributes.Add("onload", "javascript:setSize(this)");

What is the solution for this Problem ?

Thanks Md Nasir Uddin

A: 

Edit: corrected example

<html>
<head runat="server">
    <title></title>
    <script type="text/javascript" language="JavaScript">
        function setSize() {
            document.getElementById('<%= IFrameMaster.ClientID %>').height = document.body.scrollHeight - 30;
        }
    </script>
</head>
<body onload="setSize(); Sys.UI.DomEvent.addHandler(window, 'resize', setSize);">
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" />
    <iframe src="about:blank" runat="server" id="IFrameMaster"></iframe>
    </form>
</body>
</html>

just 2 things:

  • to be able to call Sys.UI.DomEvent.addHandler (or $addHandler) you require a ScriptManager
  • the -30 is to keep it from failing when the page shrinks. Play with your margins and find an appropriate value
y34h
Its working on when first page is load. but other page not working..
Nahid
A: 

With ASP.NET AJAX the onload event of the document will not be called after async request. Instead use the pageLoaded event of the ScriptManager and your js code which sets the height of the iframe should be executed.

Dick Lampard