Home ›
ASP.NET Forums » General ASP.NET » Web Forms » How do I make the height of an iframe flexible

How do I make the height of an iframe flexible

Last post 06-17-2008 6:39 PM by Robert Barnes. 6 replies.

Sort Posts:

  • How do I make the height of an iframe flexible

    11-13-2007, 11:12 PM

    I have a page that includes an iframe, defined as
              <iframe id="ifrStory" width="100%" runat="Server" visible="false" height=500 /> 

    This is populated by the codefile with
              ifrStory.Attributes.Add("src", Request.ApplicationPath & Mid(document.DOCPath, 2)) 

    If the document requires more than 500 pixels height, scroll bars appear.   Perfect!

    However, I am now trying to design a printable form of the page.  Here I want the iframe to have whatever height it needs so that the whole document is printed.   How do I do this?  If I omit the Height property, then the Iframe has the default height (100 pixels?) only.  

    Related question:  can I insert further Iframe elements at run time?  I have a table that may contain some more documents, and I'd like the option of "print them all".  Or is there a different approach that I should use to printing documents through the browser?
     

  • Re: How do I make the height of an iframe flexible

    11-14-2007, 6:00 AM
    Answer
    • Loading...
    • hundehasser
    • Joined on 02-21-2007, 8:35 AM
    • Berlin, Germany
    • Posts 52

    Hi there!

    Using Javascript you can get the height of the iframe's content document and then set the iframe's height to that value (plus some additional pixels for borders, margins, paddings, IE box layout bugs...).

    1    <head runat="server">
    2    	<script type="text/javascript" language="javascript">
    3    	<!--
    4    		resizeIframe = function(iframeName){
    5    			var iframe = document.getElementById(iframeName);
    6    			if (iframe.contentDocument) {
    7    				// FF
    8    				iframe.style.height = iframe.contentDocument.height + 24 + "px";
    9    			}
    10   			if (iframe.contentWindow.document.body) {
    11   				// IE7
    12   				iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 24 + "px";
    13   			}
    14   		};
    15   		
    16   		resizeAllIframes = function() {
    17   			var iframeList = document.getElementsByTagName('iframe');
    18   			if(!iframeList ) return;
    19   			
    20   			for(var i = 0; i < iframeList.length; i++ )	{
    21   				var iframe = iframeList.item(i);
    22   				resizeIframe(iframe.id);
    23   			}
    24   		}
    25   		onload = resizeAllIframes;
    26   	-->    
27   	</script>
    28   </head>
    29   <body>
    30   	<iframe id="iframe1" style="width:100%;" src="bookmarks.html" onload="resizeIframe('iframe1')"></iframe>
    31   	<iframe id="iframe2" style="width:100%;" src="bookmarks.html"></iframe>
    32   </body>
    You can either resize a single iframe by using function 'resizeIframe(name)' as shown in line 30, or you let Javascript resize all iframes at load time (line 25) calling function 'resizeAllIframes()'.

    HTH and best regards,
    Thomas 
    Filed under: , ,

  • Re: How do I make the height of an iframe flexible

    11-14-2007, 6:27 AM

    Thanks, I'll try this out in the morning (it's after midnight here, and this looks like something I should do with a clear head).Smile

    Do I have to adapt this for my situation? I'm using a master page (and also a separate codefile), so I don't have a <head> ... </head> in the detail page, only in the master page.  If I write this in the master page, then the references to id's like "iframe1" defined in the particular page may cause errors.  Alternatively, should I not use a master page for this page?

  • Re: How do I make the height of an iframe flexible

    11-14-2007, 7:07 AM
    • Loading...
    • hundehasser
    • Joined on 02-21-2007, 8:35 AM
    • Berlin, Germany
    • Posts 52

    Hi there! 

    Robert Barnes:

    Do I have to adapt this for my situation? I'm using a master page (and also a separate codefile), so I don't have a <head> ... </head> in the detail page, only in the master page.  If I write this in the master page, then the references to id's like "iframe1" defined in the particular page may cause errors.  Alternatively, should I not use a master page for this page?

     

    No, it will work out of the box even on Master Pages (just tried). You can either

    • Embed the JavaScript inside the Master Page's <head> section, but get rid of the "onload=resizeAllIframes()" in line 25 and use 'resizeIframe()' on demand basis as in line 30, or else all  iframes on any Content Page will be resized unconditionally -- or
    • Put the above <script>-section anywhere inside your <asp:Content>-tags on the Content Page as needed -- or
    • Put the JavaScript functions in a separate file or resource and struggle with ScriptManager.RegisterStartupScript() or RegisterClientScript() in your Content Page's code behind (Nah, you probably don't want that)

    Best regards,
    Thomas (out for lunch anytime soon) 

  • Re: How do I make the height of an iframe flexible

    11-14-2007, 3:20 PM

     Eureka!  It worked perfectly.  Since I have a special master-page that is only used for printable pages, the resizeAllIframes approach works well.

    Thanks, Robert 

  • Re: How do I make the height of an iframe flexible

    06-17-2008, 8:49 AM

    Mister, can you post all sample code about this issue ?

     Thanks !!!

    http://www.setbb.com/putainformatica/viewtopic.php?p=843
    www.trabajobasura.com/solusoft
    www.kiquenet.net/churrosoft

  • Re: How do I make the height of an iframe flexible

    06-17-2008, 6:39 PM

     alhambraeidos, all the code you need is in Hundehasser's post, which is the second post in this thread.   Since you asked, here is the complete source of my "Print version Master Page",  but this adds nothing to Hundehasser's code, and contains some extraneous stuff. 

    <%@ Master Language="VB" CodeFile="GDBMaster_P.master.vb" Inherits="GDBM_P" Debug="true" %>
<%@ Register TagPrefix="uc" TagName="Return" src="~/Controls/Return.ascx" %>
<html>
<head runat="server">
    <title>Help</title>
    <link href="gdb.css" type="text/css" rel="stylesheet" />

    <script type="text/javascript" language="javascript">
    		resizeIframe = function(iframeName){
    			var iframe = document.getElementById(iframeName);
    			if (iframe.contentDocument) {
    				// FF
    				iframe.style.height = iframe.contentDocument.height + 24 + "px";
    			}
       			if (iframe.contentWindow.document.body) {
    				// IE7
    				iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 24 + "px";
    			}
    		};
    		
    		resizeAllIframes = function() {
    			var iframeList = document.getElementsByTagName('iframe');
    			if(!iframeList ) return;
    			
    			for(var i = 0; i < iframeList.length; i++ )	{
    				var iframe = iframeList.item(i);
    				resizeIframe(iframe.id);
    			}
    		}
    		onload = resizeAllIframes;

    </script>

</head>
<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" bgcolor="#ffffff">
    <form id="form1" runat="server">
        <table cellpadding="0" height="100%" cellspacing="0." width="100%">
            <tr>
                <td>
                    <img id="Img2" src="~/GDBMstr/logo.gif" width="364" height="34" alt="" runat="server" />
                    <button onclick="print();">
                        Print</button>
                    <uc:Return ID="btnReturn" runat="server" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
     
Page 1 of 1 (7 items)
RSS Available

Advertise on ASP.NET

About this Site

Microsoft Communities
Page view counter