Dynamic iFrame height not working with Ajax!
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head" runat="server">
<tit开发者_Go百科le></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
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
-30is to keep it from failing when the page shrinks. Play with your margins and find an appropriate value
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.
加载中,请稍侯......
精彩评论