/    Sign up×
Community /Pin to ProfileBookmark

dynamic iframe height

Copy linkTweet thisAlerts:
Oct 14.2004

I’m using the following code for a page, that has a drop down which calls a file in an iframe. The height usually expands to accomodate the file that is called. However, randomly it does not expand, and in stead cuts off some of the content of the iframe file.

Any thoughts?

JAVASCRIPT:

<script language=”JavaScript1.2″ type=”text/javascript” src=”/JavaScript/iframe_print.js”>
function doSel(obj)
{
for (i = 1; i < obj.length; i++)
if (obj[i].selected == true)
eval(obj[i].value);
}

function getIFRAMEdocheight(theiframe, def_height) {
var IFRAMEref = frames[theiframe];
if (IFRAMEref)
return (typeof IFRAMEref.document.body != ‘undefined’ &&
typeof IFRAMEref.document.body.scrollHeight != ‘undefined’) ?
IFRAMEref.document.body.scrollHeight :
(typeof IFRAMEref.document.height != ‘undefined’) ?
IFRAMEref.document.height :
def_height;
}
</script>

HTML CODE:

<table cellpadding=”0″ cellspacing=”0″ border=”0″ width=”556″ align=”center”>
<tr>
<td bgcolor=”597D33″></td>
</tr>
<tr>
<td bgcolor=”FFFFFF”></td>
</tr>
<tr>
<td bgcolor=”E1EDF6″ align=”right” valign=”middle”>
<table cellpadding=”3″ cellspacing=”0″ width=”100%” border=”0″>
<tr>
<td align=”right” valign=”middle”>

<FORM name=”jsMenu”>
<select name=”jsSelList” size=”1″ onchange=”doSel(this)”>
<option>- SELECT AD PRODUCT -</option>
<option value=”parent.theiframe.location.href=’/wxcom/ad_products/products/content_sponsorship.shtml'”>Content Sponsorship</option>
</select>
&nbsp;&nbsp;<a href=”javascript:void print_iframe(‘theiframe’)” title=”print” class=”bolded_link_black”>print<img src=”/images/icon_print.gif” width=”20″ height=”16″ alt=”print” border=”0″ align=”absmiddle”></a>&nbsp;&nbsp;
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor=”FFFFFF”></td>
</tr>
<tr>
<td bgcolor=”597D33″></td>
</tr>

</table>
<IFRAME marginheight=”0″ width=”556″ SRC=”#” TITLE=”Creative Specs” id=”theiframe” SCROLLING=”no” NAME=”theiframe” ALIGN=”center” FRAMEBORDER=”0″ onload=”theiframe.resizeTo(556,getIFRAMEdocheight(‘theiframe’,556))”></IFRAME>
</FORM>

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@baconbuttyOct 14.2004 — (Untested) I think your problem may be with:-

IFRAMEref.document.scrollHeight != 'undefined'

IFRAMEref.document.height != 'undefined'

Problems may be:-

  • 1. IFRAMEref.document.height could be returning 'null' or '' (empty string) which is a different value to 'undefined'.


  • 2. You should be addressing


    • document.[B]body[/B].[B]offsetHeight[/B]

    i.e. the document is the container for the HTML page, not the HTML page itself.

    Try (IE only)

    [code=php]
    function getIFRAMEdocheight(theiframe, def_height)
    {
    var IFRAMEref = frames[theiframe];
    if (IFRAMEref)
    return (IFRAMEref.document.body &&
    IFRAMEref.document.body.scrollHeight) ?
    IFRAMEref.document.body.scrollHeight :
    (IFRAMEref.document.body.offsetHeight) ?
    IFRAMEref.document.body.offsetHeight :
    def_height;
    }

    [/code]
    Copy linkTweet thisAlerts:
    @bpaganauthorOct 14.2004 — I give it a try. What stinks is it happens randomly, so I'm not sure the best way to test the new code to see if it works correctly!
    Copy linkTweet thisAlerts:
    @bpaganauthorOct 15.2004 — No go....

    Still seems to do it.

    Any thoughts?
    Copy linkTweet thisAlerts:
    @baconbuttyOct 15.2004 — 
  • 1. SCROLLING = NO


    • The starting point is that you have srcolling="no" set in the IFRAME.

    This means that if the function cannot get the loaded web page's height, it will set default height (556), which, if less than the loaded web page's actual height, will mean that the rest of the body is hidden.

  • 2. ONLOAD EVENT


    • One other thought is that there may be a problem with the "onload" event attached to the IFRAME element. I am not sure if it fires when it loads a document, or just when your main web page first loads.

    Or, it may either (1) not be firing at all, or (2) be firing before the IFRAME has fully loaded the new document (so no available height, hence the default height is set), which may also have something to do with what is included in the document you are loading.

    Have a look at this page I found.

    [URL]http://www.dyn-web.com/dhtml/iframes/[/URL]

    The solution is either to monitor the document.readyState property or put an onload event in the page being loaded into the IFRAME.

    Try

    [CODE]

    <script language="JavaScript1.2" type="text/javascript" src="/JavaScript/iframe_print.js">

    function doSel(obj)
    {

    for (i = 1; i < obj.length; i++)
    {

    if (obj[i].selected == true)
    {
    var sURL=obj[i].value;
    var oWin = document.gelElementById("theiframe").contentWindow;
    oWin.onload=function()
    {
    oWin.parent.setIFRAMEdocheight("theiframe",556);
    };

    }

    }

    }


    function setIFRAMEdocheight(frameid, def_height)

    {
    var IFRAMEref = document.getElementById(frameid).contentWindow;

    if (!IFRAMEref){return;}

    var nHeight=(IFRAMEref.document.body &&
    IFRAMEref.document.body.scrollHeight) ?
    IFRAMEref.document.body.scrollHeight :
    (IFRAMEref.document.body.offsetHeight) ?
    IFRAMEref.document.body.offsetHeight :
    def_height;

    document.getElementById(frameid).style.height=nHeight;

    }
    </script>



    HTML CODE:

    <table cellpadding="0" cellspacing="0" border="0" width="556" align="center">
    <tr>
    <td bgcolor="597D33"></td>
    </tr>
    <tr>
    <td bgcolor="FFFFFF"></td>
    </tr>
    <tr>
    <td bgcolor="E1EDF6" align="right" valign="middle">
    <table cellpadding="3" cellspacing="0" width="100%" border="0">
    <tr>
    <td align="right" valign="middle">

    <FORM name="jsMenu">
    <select name="jsSelList" size="1" onchange="doSel(this)">
    <option>- SELECT AD PRODUCT -</option>
    <option value="/wxcom/ad_products/products/content_sponsorship.shtml">Content Sponsorship</option>
    </select>
    <a href="java script:void print_iframe('theiframe')" title="print" class="bolded_link_black">print<img src="/images/icon_print.gif" width="20" height="16" alt="print" border="0" align="absmiddle"></a>

    </td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="FFFFFF"></td>
    </tr>
    <tr>
    <td bgcolor="597D33"></td>
    </tr>
    </table>
    <IFRAME marginheight="0" width="556" SRC="#" TITLE="Creative Specs" id="theiframe" SCROLLING="no" NAME="theiframe" ALIGN="center" FRAMEBORDER="0"></IFRAME>
    </FORM>

    [/CODE]
    Copy linkTweet thisAlerts:
    @baconbuttyOct 15.2004 — Sorry, you need to include a location.href in doSel in my function

    [CODE]
    function doSel(obj)
    {

    for (i = 1; i < obj.length; i++)
    {

    if (obj[i].selected == true)
    {
    var sURL=obj[i].value;
    var oWin = document.gelElementById("theiframe").contentWindow;
    oWin.onload=function()
    {
    oWin.parent.setIFRAMEdocheight("theiframe",556);
    };

    [B]document.getElementById('theiframe').src=sURL;[/B]
    }

    }

    }
    [/CODE]
    ×

    Success!

    Help @bpagan spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...